Vuex垃圾邮件在提交时没有明显原因的错误

Question

在我的插件中，我有以下代码：

import firebase from 'firebase'

export default context => {

  firebase.auth().onAuthStateChanged(userObject => {

    // eslint-disable-next-line no-console

    console.log({ userObject })

    context.store.commit('auth/setUser', { userObject })

  })

}

一切都很好，这userObject是正确的。现在在商店：

import Vue from 'vue'

export const state = () => ({

  user: null

})

export const mutations = {

  setUser(state, val) {

    // eslint-disable-next-line no-console

    console.log(val)

    Vue.set(state, 'user', val)

  }

}

事情变得很奇怪，一旦这触发了我的控制台收到垃圾邮件，Do not mutate vuex store state outisde mutation handlers但我在那里看不到任何地方？现在搜索了几个小时，但无法解决错误，提前致谢。

Answer 1

这是因为 firebase 用户可以由 firebase 本身更改，因此您需要使用 userObject 的克隆设置商店。因为它可能是一个嵌套对象，所以您可以像这样进行深度克隆：export default context => {  firebase.auth().onAuthStateChanged(userObject => {    // eslint-disable-next-line no-console    let userOb = JSON.parse(JSON.stringify(userObject))    console.log({ userOb })    context.store.commit('auth/setUser', { userOb })  })}此外，您没有正确使用 Vue.set。要设置一个对象，它应该是这样的：Vue.set(state.user, key, value)但我认为你不需要 vue set，你应该能够分配它：export const mutations = {  setUser(state, val) {    state.user = val  }}但如果这搞乱了反应性，我会将用户初始化为一个数组并将其设置为：export const state = () => ({  user: []})export const mutations = {  setUser(state, val) {    // eslint-disable-next-line no-console    console.log(val)    Vue.set(state.user, 0, val)  }}