NuxtJS和Firebase: Error: [vuex]在突变处理程序之外不改变vuex存储状态

Question

在我的NuxtJS应用程序中，当我尝试更新用户的photoURL时，我得到以下错误:

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)

下面是导致问题的代码:

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)
}
},

如果我注释掉updateProfile()，它工作得很好，但是如果我把它放回去，我就会得到错误。我做错了什么?

Answer 1

显然使用重火力点Auth方法:updateProfile()引发了onAuthStateChanged更新。因此，这样做:

updateProfile(auth.currentUser, {
photoURL: this.imageSrc.secure_url
})

…导致认证观察者更新，因为有提供者数据被修改(头像图像)，这导致以下代码运行:

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)
},

罪魁祸首是providerData属性，它修改了一些与Vuex存储的不同的参考数据，因此Vuex错误。

进一步，我看到了这个:

不要将authUser直接保存到存储中，因为这会保存一个对象引用到由Firebase认证定期直接更新的状态，因此如果strict != false会抛出vuex错误。

所以，从我的onauthstatechange行动中删除providerData修复了这个问题。