not错误：[ vuex ]在从插件中突变时不要变异vuex存储状态外部的突变处理程序

Question

我在一个Nuxt项目的旁边使用Firebase，在下面的插件中，我调用onAuthStateChanged来检查用户是否已经登录，如果他是，我会设置用户状态并将他重定向到仪表板，如下所示：

import firebase from 'firebase'

export default ({ store, redirect }) => {
  if (!firebase.apps.length) {
    const config = {
      apiKey: 'AIzaSyDFS8Wk6B7ontvZeargY3z7k0u92EJvlN0',
      authDomain: 'jammer-bd4bc.firebaseapp.com',
      databaseURL: 'https://jammer-bd4bc.firebaseio.com',
      projectId: 'jammer-bd4bc',
      storageBucket: 'jammer-bd4bc.appspot.com',
      messagingSenderId: '156254683024'
    }

    firebase.initializeApp(config)
  }

  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      store.commit('auth/setUser', user)
      redirect('/dashboard')
    } else {
      redirect('/')
    }
  })
}

插件在我的nuxt.config.js中引用如下：

plugins: [
  '~/plugins/firebase'
],

但是，当我们到达存储提交时，会出现以下错误：

错误: vuex不变异vuex存储状态之外的变异处理程序

就像我在插件中直接改变状态一样(正如你所看到的，我没有)。

是什么导致了这个问题？

Answer 1

这是因为您正在将firebase用户对象转到您的vuex存储区。后来，它可以通过火药库本身来改变。所以解决办法是先克隆它，然后再加入vuex。

Answer 2

是的，你在变异商店。

commit()引发突变。

dispatch()启动一个动作

因此，简单的解决办法是使用dispatch('auth/setUser')，这是一个非常简单的action，它调用commit('auth/setUser')