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)

  }

}