Make Vuex store data reactive in Vuejs

https://webdevfix.com/make-vuex-store-data-reactive-in-vuejs

Tech:

Vuejs

Since:

1 year ago

Views:

6

Changing the Vuex store's data directly won't be reactive and the components consuming those won't not update. There are two ways to make the store's data reactive.

Solution 1 - Using spread operator

// State
export const state = () => ({
  obj1: { val_1: 1 }
});

// Mutation
export const mutations = {
  UpdateProperty(state) {
    state.obj1 = { ...state.obj1, val_2: 2 };
  }
};

Solution 2 - Using Vue.set

// State
export const state = () => ({
  obj1: { val_1: 1 }
});

// Mutation
export const mutations = {
  UpdateProperty(state) {
    Vue.set(state.obj1, "val_2", 2);
  }
};

More Articles

Make Vuex store data reactive in Vuejs

HTML Table - 10 Tags and its Attributes (Reference)

CSS Background - 10 Properties and its Values (Reference)

Javascript Number - 10 Methods and 5 Properties (Reference)

Javascript Global Object - 11 Methods and 3 Properties (Reference)