javascript - 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 outisdemutation 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
  }
}

但是如果这会扰乱 react 性，我会将用户初始化为数组并按如下方式设置:

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