Within my vuex store, I have a setup where users are authenticated using Firebase. After logging in, the
firebase.auth().onAuthStateChangeduser variable to state.user and saving it in the Firebase database. However, when I try to add the final part of my code (database.ref...), my console becomes flooded with errors. Surprisingly, these errors are not related to Firebase but rather to Vuex.
The errors being displayed are as follows (x80):
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }":
Error: [vuex] Do not mutate vuex store state outside mutation handlers.
Although my code is still functioning correctly, having 80 errors pop up every time a user logs in during development is not ideal. How can I go about resolving these errors?
// actions
const actions = {
startListeningToAuth ({ commit }) {
firebase.auth().onAuthStateChanged((user) => {
commit(types.SET_USER, { user })
})
}
}
// mutations
const mutations = {
[types.SET_USER] (state, { user }) {
// Set the user in state
state.user = user
// If a user exists, save their details in the database
if (user) {
database.ref('users/' + user.uid).set({
name: user.displayName,
email: user.email,
photo_url: user.photoURL
})
}
}
}