Vuex and Firebase store state errors

Question

I have the following setup in my vuex store: My users log in with Firebase authentication. Upon login, firebase.auth().onAuthStateChanged is called and user is set to state.user but also saved in the Firebase database. The moment when I add the last part of my code (database.ref...) my console explodes with errors. The errors, however, are not related to Firebase but to Vuex.

Errors are the following (x80):

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }":

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

My code still works, but during development, I don't want to see 80 errors as the user logs in. How can I get rid of these errors?

// actions
const actions = {
  startListeningToAuth ({ commit }) {
    firebase.auth().onAuthStateChanged((user) => {
      commit(types.SET_USER, { user })
    })
  }
}

// mutations
const mutations = {
  [types.SET_USER] (state, { user }) {
    state.user = user

    if (user) {
      database.ref('users/' + user.uid).set({
        name: user.displayName,
        email: user.email,
        photo_url: user.photoURL
      })
    }
  }
}

Answer 1

You can use toJSON() method to the firebase.User interface

commit(types.SET_USER, { user.toJSON() })

This will allow to add user data to your store without warnings but i guess that you can lose the realtime user state from firebase.

See https://firebase.google.com/docs/reference/js/firebase.User#toJSON