Vue3/Vuex - 使用解构赋值时组件不反映状态更改

Question

我正在使用 Vue 3 和 Vuex。当通过解构赋值改变状态时，我无法让 Vue 对状态变化做出反应。不过，当我通过仅重新分配单个值的突变更改状态时，我能够让 Vue 做出反应。

我做错了什么吗？

以下代码有效

我有一个在

setup()

中引入 Vuex getter 的组件：

const someValue = computed(() => store.getters['app/getSomeValue'])

下面的代码调度改变这个值的动作并且

will

反应得很好： store.dispatch('app/setSomeValue', newValue)

突变：

setSomeValue(state, value) {
  state.someValue = value
},

以下代码

不工作 如果我想改变模块状态的多个属性而不依赖于多个突变怎么办？我会使用对象解构。以下代码在记录时显示状态更改确实发生，但使用它的组件和 Vuex devtools 都没有反映更改。

正在调度的操作：

store.dispatch('app/setSomeValue', { someValue: newValue })

使用解构的突变：

setState(state, payload) {
 state = { ...state, ...payload }
}

现在，我什至不必更改吸气剂。尽管使用了这种方法，Vue 并没有发现变化。如果我在使用解构后记录状态，它会显示 

someValue

正在更新。给什么？

Answer 1

state

对象一定会破坏反应性，或者以其他方式导致 Vuex 以某种方式失去对状态变化的跟踪。

使用

Object.assign

将键值从有效负载复制到存储状态，同时在内存中保留相同的原始 state 对象。

setState(state, payload) {
  Object.assign(state, payload)
}