Vuex inside nuxt app throws "Do not mutate vuex store state outside mutation handlers"!

Question

In my NUXT app I am using vuex store modules! When I run the app and call

this.$store.dispatch('userStore/setLoggedInUser',currentUser); //default.vue

I get an error saying "Do not mutate vuex store state outside mutation handlers" that loops infinitely!

My module looks like this:

const actions = {
  setLoggedInUser({commit},currentUser){
    return new Promise((resolve,reject)=>{
      commit('mutateLoggedInUser',currentUser);
      resolve();
    });
  }
}

const mutations = {
  mutateLoggedInUser(state,user){
    state.loggedInUser = user;
  }
}

I found a solution (sort of). By setting strict mode to false in the store/index.js file the error disappears.

export const strict = false

But this seems like a hacky solution and I dont really understand whats going on. Is this a bug in NUXT or am I doing something weird in my vuex store?

Answer 1

This error usually occurs if you're watching the passed in value somewhere which causes an infinite update loop but if you're not watching, it could be due to you passing in the original value rather than a copy.

Try changing: state.loggedInUser = user to state.loggedInUser = user.slice() or this.$store.dispatch('userStore/setLoggedInUser',currentUser.slice())