vue.js - Nuxt 错误 : [vuex] Do not mutate vuex store state outside mutation handlers when mutating from plugin

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'
],

但是当我们到达商店提交时出现以下错误:

Error: [vuex] Do not mutate vuex store state outside mutation handlers

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

是什么导致了这个问题？

Answer 1

这是因为您正在将 firebase 用户对象发送到您的 vuex 存储。以后可以通过 firestore 本身进行更改。所以解决方案是在提交到 vuex 之前克隆它