[Vuejs]-Vue & Vuex: no re-render after object key value mutation

by

1👍

✅

Oh, That problem!

That’s the weird part of the reactivity system in vue 2, which I strongly recommend you to use vue 3, to avoid this. In version 3, proxies are far more better and understandable.

But, for solution, you can use Vue’s Vue.set method (or this.$set inside a component) to ensure that the change is reactive:

import Vue from 'vue';

UPDATE_VALUE: (state, {key, value}) => {
  Vue.set(state.value, key, value);
}

or if you like:

UPDATE_VALUE: (state, {key, value}) => {
  state.value = { ...state.value, [key]: value };
}

Both will work. Best of Luck!

👤Ali Bahrami

Leave a comment