提问人：Sam Britt 提问时间：10/10/2023 更新时间：10/10/2023 访问量：23
Vue3/Vuex - 使用解构赋值时组件不反映状态变化
Vue3/Vuex - Component not reflecting state change when using destructuring assignment
问：
我正在将 Vue 3 与 Vuex 一起使用。我无法让 Vue 在通过解构赋值改变状态时对状态变化做出反应。不过，当我通过仅重新分配单个值的突变更改状态时，我能够让 Vue 做出反应。
我做错了什么吗？
以下代码有效
我有一个组件，可以在以下位置拉入 Vuex getter：setup()
const someValue = computed(() => store.getters['app/getSomeValue'])
下面的代码调度了改变此值的操作，并且反应良好：
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
答：
2赞
yoduh
10/10/2023
#1
重新分配整个对象必须破坏反应性，或者以其他方式导致 Vuex 以某种方式失去对状态变化的跟踪。state
使用 Object.assign 将有效负载中的键值对复制到存储状态，同时在内存中保留相同的原始对象。state
setState(state, payload) {
Object.assign(state, payload)
}
评论
0赞
Sam Britt
10/24/2023
显然，通过解构赋值，我正在创建一个新对象。Vue 跟踪 OLD 对象，因此永远不会发现这个新对象应该包含什么。感谢您的回答，因为它是正确的。
评论