Vue & Vuex：对象键值突变后不重新渲染

Question

我在前端使用 vuex 存储值

...mapGetters({ value : 'store/value' });

我面临着一个非常奇怪的情况：

• 如果我像这样更新存储值，那么它会重新渲染并且更新后的值出现在正面

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

• 但是如果我尝试像这样更新它，那么它会改变存储值但不会重新渲染

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

你有什么想法吗？

Answer 1

哦，这个问题！

这是 vue 2 中反应系统的奇怪部分，我强烈建议您使用 vue 3，以避免这种情况。在版本 3 中，代理更好、更容易理解。

但是，对于解决方案，您可以使用 Vue 的

Vue.set

方法（或组件内的

this.$set

）来确保更改是反应性的：

import Vue from 'vue';

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

或者如果你喜欢的话：

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

两者都可以。祝你好运！