Vuex State Updated only in local scope of mutation

I am trying to update the store state using mutation. But the problem is that the state remains same after mutation and is updated only in scope of that mutation. It acting more of like passing arguments to a function.

The expectations are the state in the store should be updated but it's not happening. The store state is not mutated at all but the argument state is being mutated.

Here is the sample code of my implementation. I am using modules for Vuex Store and this is from

user.store.js

 export const user = {
  state: {
   user: {},
   isAuthenticated: false
  },
  mutations: {
   updateUser(state, payload) {
     Vue.set(state.user, payload.key, payload.value);
   }
  }
}

Edit 2: I got to the fix of the issue and it is due to similar naming for the user store module and the state.user object. After i changed the name of the store module, the issue was resolved.

Thank You for you contributions.

1 answer

  • answered 2019-10-22 10:31 Ilya Degtyarenko

    Try to use Vue.set in your mutation.

    For example:

    state: {
        isInteractionEnabled: false
    },
    mutations: {
        SWITCH_INTERACTION: (state, {status}) => Vue.set(state, 'isInteractionEnabled', status)
    },