Setting firebase.User in vuex results in eternal loop

Question

UPDATE: This error only occurs with vuex strict mode enabled

I am building a Vue application with firebase authentication, but the application fails with the following error messages:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

Uncaught RangeError: Maximum call stack size exceeded

The error occurs when i commit the user to my Vuex store in my main.ts file:

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    store.commit(constants.auth.SET_USER, user) // THIS LINE
    store.commit(constants.auth.SET_AUTHENTICATED, true)
    router.push('/')
  } else {
    store.commit(constants.auth.SET_USER, null)
    store.commit(constants.auth.SET_AUTHENTICATED, false)
    router.push('/signup')
  }
  if (!app) {
    app = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#app')
  }
})

Here is my mutation:

[constants.auth.SET_USER](state: AuthState, payload: firebase.User): void {
      state.user = payload
}

I can tell from Vue devtools, that the mutation actually happens, and that the user is committed to the store, but i have no idea why this error occurs. Can you help me?

I've tried commenting out nearly everything else in the application, and these are the only parts that cause any trouble.

Have you seen this post: forum.quasar-framework.org/topic/546/… — Renaud Tarnec
Yes, but i am not using v-model, so i don't think it helps me. Do you have an idea of how it could be used in my situation? — Simon Hammerholt Madsen

user2522402 user2522402 · Accepted Answer · 2019-08-06T15:37:05

store user.toJSON() in your state. firebase user is a complex object that shouldn't be stored in vuex state.

Setting firebase.User in vuex results in eternal loop

2 Answers