Nuxt 錯誤：[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被引用， nuxt.config.js所示：

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

但是當我們到達 store commit 時出現以下錯誤：

錯誤：[vuex] 不要在變異處理程序之外改變 vuex 存儲狀態

好像我是直接在插件中改變狀態一樣（正如你所見，我不是）。

什么可能導致這個問題？

Answer 1

這是因為您將 firebase 用戶對象添加到您的 vuex 商店。 稍后可以由 firestore 本身更改。 所以解決辦法是在提交到vuex之前先clone一下

Answer 2

是的，你正在改變商店。

commit()觸發一個突變。

dispatch()觸發一個動作

所以簡單的解決方法是使用dispatch('auth/setUser')這是一個非常簡單的action ，調用commit('auth/setUser')