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，您应该可以只分配它：

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

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

1 个答案: