While working with Vue 3 and Vuex, I encountered an issue where Vue did not react to a state change when using object destructuring assignment to mutate the state. However, I found that Vue does react when the state is mutated by a mutation that only reassigns a single value.
Could I be doing something incorrectly?
The code snippet below successfully works
In my component, I accessed a Vuex getter in the setup() function:
const someValue = computed(() => store.getters['app/getSomeValue'])
The following code dispatches an action that mutates the value:
store.dispatch('app/setSomeValue', newValue)
Here's the corresponding mutation:
setSomeValue(state, value) {
state.someValue = value
},
The subsequent code does not yield the expected result
If I wanted to update multiple properties of a module's state without resorting to multiple mutations, I would typically use object destructuring. In this case, the state changes when logged, but neither the component nor Vuex devtools acknowledge the change.
- The dispatched action:
store.dispatch('app/setSomeValue', { someValue: newValue })
- The mutation utilizing destructuring:
setState(state, payload) {
state = { ...state, ...payload }
}
Even though I didn't need to modify the getter, Vue fails to detect the change when employing this approach. Upon logging the state after using destructuring, it reflects the updated value for someValue. Why isn't Vue recognizing this change?