Skip to content

In Vue3 changing root state stopped working

My mutations which changes root state stopped working

 SET_STATE(state, payload) {
    state = { ...state, ...payload };
 }

But changing inner value is working

SET_INNER_STATE(state, payload) {
   state.inner = payload;
}

Answer

This state = ... changes state local variable (parameter), it cannot affect anything that happens outside this function.

{ ...state, ...payload } shouldn’t be done in Vue because it doesn’t force immutable state the same way as React.

Initial state should be generally set on store initialization. If it should occur later for some reason, it should be merged to existing state object. Shallow merge can be:

Object.assign(state, payload);