Vuex: Is there anyway to mutate a state object from a vue instant directly when an object within the instant has property change?

Question

I'm using vue with vuex to set up a web application. In this application, I would like to store some user editable data into the vuex state in a form of an object containing the editable properties i.e. {firstname: "", lastname: ""}, but I was told to try taking away the watchers for monitoring change in an object and somehow make the application able to store the changed object to state.

I have tried to get the state from store and put in on the vue instant and let the users edit the fields that was bind to the object's property i.e. v-model:detail.firstname where detail is an object got from vuex store. And obviously, the console shows errors of "do not mutate store data outside of mutation" when the values change. I get what it means so I then later made it to something like this:

Template:

<input type="text" v-model="detail.firstname" />
<br />
<input type="text" v-model="detail.lastname" />

Script:

data() {
  return {
    detail: {}
  }
},
created: function () {
  // initialize this.detail with Object.assign to clone from another object etc.
},
watch: {
  'detail': {
    handler: function (val) {
      debugger;
      this.setTabStorageItem({ key: "modifyingDetail", value: val });
    },
    deep: true
  }
}

I know value changes should not be done out of mutation, so I'm not going to reference detail directly from getter and change that object directly. But as I said I was told to try not to use watcher for the value change. But if so the only solution I could think of would be reference detail directly from getter so v-model would do the job to change the properties of the object given when user edits and the problem goes back to mutate state out of mutation.

Is there any other solution I could try, not using watcher?

And I think there's also another problem shown in the example, it is always replacing the whole object with a new one. That sounds like it would create unnecessary loading to the page because all state changes use a new object. (and forgive me for not being including this in title/in another question) Solving this might lead to the one who told me not to use watcher, agrees with using watcher. Or if there's really no other options, they would just tell me to use it anyway.

Ninth Autumn Ninth Autumn · Accepted Answer · 2019-05-17T08:59:39

I'm not sure if I completely understood what you are getting at, but from my understanding what you want to do is allow user to edit values, firstname and lastname

I would

data(){
 return{
  detail:{
    firstname: this.$store.getters['getUser'].firstname,
    lastname: this.$store.getters['getUser'].lastname
  }
 }
}

and watch the changes of detail through watcher

watch:{
  'detail.firstname': function(val){
    this.changeHandler()
  }
  'detail.lastname':function(val){
     this.changeHandler()
   }
}

for every data change you can commit('') if you don't care about syncing with the database

  methods:{
      changeHandler: function(){
         this.$store.commit('changeUser', {firstname: this.detail.firstname, 
                                           lastname: this.detail.lastname})
      }
    }

I'm not even sure why you would want to watch for every change rather than changing the detail after the user clicked on some submit button and change it in the database and setting the detail to the latest values

Vuex: Is there anyway to mutate a state object from a vue instant directly when an object within the instant has property change?

1 Answers