In my NuxtJS app when I try to update a user's photoURL, I get the following error:
client.js?06a0:103
Error: [vuex] do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js?2f62:135)
at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
at Watcher.run (vue.runtime.esm.js?2b0e:4584)
at Watcher.update (vue.runtime.esm.js?2b0e:4558)
at Dep.notify (vue.runtime.esm.js?2b0e:730)
at Object.reactiveSetter [as photoURL] (vue.runtime.esm.js?2b0e:1055)
at updateProfile (index-d81b283a.js?6899:5314)
Here's the code that is causing the issue:
async updateAvatar() {
const auth = getAuth()
try {
await updateProfile(auth.currentUser, {
photoURL: this.imageSrc.secure_url
})
await setDoc(
doc(db, 'users', this.userProfile.uid),
{
avatar: {
...this.imageSrc
}
},
{
merge: true
}
)
console.log('avatar updated!')
} catch (error) {
console.log(error)
}
},
If I comment out the updateProfile() it works fine, but if I put it back, I then get the error. What am I doing wrong?
Apparently using the Firebase Auth method: updateProfile() triggered an onAuthStateChanged update. So, doing this:
updateProfile(auth.currentUser, {
photoURL: this.imageSrc.secure_url
})
...caused an update to to Auth Observer because there was provider data being modified (avatar image) and this caused the following code to run:
onAuthStateChangedAction({ commit, dispatch }, authUser) {
const { displayName, email, emailVerified, photoURL, uid } = authUser
commit('SET_AUTH_USER', {
displayName,
email,
emailVerified,
photoURL,
// providerData, // causes vuex mutation error
uid
})
console.log('set Auth User to store')
dispatch('getUserProfile', authUser)
},
The culprit was the providerData property which had modified some reference data that was different than what Vuex was storing, hence the Vuex error.
Further, I saw this:
Do not save the authUser directly to the store, since this will save an object reference to the state which gets directly updated by Firebase Auth periodically and therefore throws a vuex error if strict != false.
So, removing providerData from my onAuthStateChanged action fixed the issue.