I am currently stuck at trying to show a form to edit a existing site.

My Problem is one site has about 60 Input fields and writing setters and getters for every input seems not like a good approach.

So the best thing I could think of is to save my store data to a local variable, edit the local variable and send it back.

Edit.vue

<b-form-input id="currentSiteName" v-model="this.editSite.title"></b-form-input>

...
puted: {
  editSite() {
    return this.$store.state.currentSite
  }
},
mounted: function() {
  this.$store.dispatch('SHOW_SITE', {
    siteId: this.$route.params.id
  });
},

Store action

SHOW_SITE: function ({ mit }, siteParams) {
  http.get('/sites/' + siteParams.siteId).then((response) => {
      mit('SHOW_SITE', {
        site: response.data.foundSite
      });
    },
    (err) => {
      // eslint-disable-next-line
      console.log(err);
    })
},

Store mutations

SHOW_SITE: (state, { site }) => {
    state.currentSite = site;
},

If I look in my vue-dev-tools I can see that editSite has the correct values and the values are all shown in the form but i get following two errors:

Error in event handler for "input": "TypeError: Cannot read property 'editSite' of null"

Cannot read property 'editSite' of null at callback

What I am doing wrong here or is there a better / c way to solve my problem?

Any help would be greatly appreciated!

I am currently stuck at trying to show a form to edit a existing site.

My Problem is one site has about 60 Input fields and writing setters and getters for every input seems not like a good approach.

So the best thing I could think of is to save my store data to a local variable, edit the local variable and send it back.

Edit.vue

<b-form-input id="currentSiteName" v-model="this.editSite.title"></b-form-input>

...
puted: {
  editSite() {
    return this.$store.state.currentSite
  }
},
mounted: function() {
  this.$store.dispatch('SHOW_SITE', {
    siteId: this.$route.params.id
  });
},

Store action

SHOW_SITE: function ({ mit }, siteParams) {
  http.get('/sites/' + siteParams.siteId).then((response) => {
      mit('SHOW_SITE', {
        site: response.data.foundSite
      });
    },
    (err) => {
      // eslint-disable-next-line
      console.log(err);
    })
},

Store mutations

SHOW_SITE: (state, { site }) => {
    state.currentSite = site;
},

If I look in my vue-dev-tools I can see that editSite has the correct values and the values are all shown in the form but i get following two errors:

Error in event handler for "input": "TypeError: Cannot read property 'editSite' of null"

Cannot read property 'editSite' of null at callback

What I am doing wrong here or is there a better / c way to solve my problem?

Any help would be greatly appreciated!

• javascript
• vue.js
• vuex

• Well, reading your code, I believe your editSite issue is not related with vuex at all. I think you should set v-model="editSite.title" without the this reference, to get rid OF THAT EXACT ERROR. This doesn't mean your program seems right. I'm not sure what happens when you set up an v-model to a puted property, but I'm afraid it's nothing good. – Sergeon Commented Aug 4, 2018 at 17:47

2 Answers 2

You should use getters for access to store states.

import { mapGetters, mapActions } from 'vuex'

async mounted() {
  await this.showSite(this.$route.params.id);
},
puted: {
  ...mapGetters([
    'currentSite',
  ]),
},
methods: {
  ...mapActions([
    'showSite'
  ]),
},

Now, this way you should able to access store states without null exception. And you should use async await for http.get. This way your code looks cleaner.

The following documentation provides a helpful explanation of what I think you are trying to achieve: https://vuex.vuejs/guide/forms.html

In short, bind the :value attribute of the form field to the puted property. Listen to a change event and ensure that the actual mutation of the Vuex store property happens within a Vuex mutation handler. Also, note the use of the MapState function which acts as a nice little helper to map store properties to ponent puted properties.

Make sure that you are thinking of the Store state prior to when the AJAX request has pleted and updates the store. Setting a default state for the store will help alleviate any null references. Also worth noting that this. in the "this.editSite.title" attribute binding is unnecessary.