Vuex 垃圾邮件错误，在 Commit 上没有明显的原因答案

【问题标题】：Vuex spams Error for no obvious reason on CommitVuex 垃圾邮件错误，在 Commit 上没有明显的原因
【发布时间】：2019-06-09 21:32:53
【问题描述】：

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

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 的垃圾邮件，但我没有看到我这样做的任何地方？现在搜索了几个小时，但无法解决错误，提前致谢。

【问题讨论】：

@Dan 是的，我按照文档nuxtjs.org/guide/vuex-store 中提到的那样做了
@Dan 我再次删除了这只是在发帖时玩的一些东西，我会在回家后尝试下面的答案并在此处更新我的代码

标签： javascript vue.js vuex nuxt.js

【解决方案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)
  }
}

【讨论】：