[Vuejs]-How can I better organize my VueJS and VueX project to allow a dialog box with a cancel feature?

0πŸ‘

βœ…

The solution to this problem ended up being that when I assign the new localCopy to the global store, it was an object, with references to fields that were continually bound to the v-model of the the sub component. I needed to not only cloneDeep the initial object, but also cloneDeep the copy that I place into the global store or it remains tied.

-1πŸ‘

The way to solve it is just taking a look at "mapState method in vuex." Because when you update then you must call it again and the code is:

import { mapState } from 'vuex';

// ...
computed: {
  ...mapState({
    subObjects: state => state.mainObject.subObjects
  }),

  // and the others
}
// ...

in this way vuex will change the value auto in the components.

And do not forget that if you want to change value in Vuex the best way to doing it is : "using mutations"

//getting this.index of subObjects

<... v-model="subObjects[index]" ...>

Leave a comment