[Vuejs]-Vue / Vuex state changes not affecting parents

by

0👍

When changing the child of an object in the Vuex store, sometimes Vue not show that correctly. I faced this issue when I try to watch the store object and some child key value of the object is changed. I solved this by making a copy of the entire object;

Declare this cloning function globally,

_cloneObj: function(obj){
   return JSON.parse(JSON.strigify(obj));
}

Now, use this function whenever changing the value in store, like

CHANGE_STORE: (state,newValue) =>{
   let obj =  _cloneObj(state.your_object); // this will give you clone of the store obkect
   obj.your_key = newValue; // change the value you want
   state.your_object = obj; // set the value back to store
}

The store will consider this as the entire object change and it’ll reflect everywhere.

Leave a comment