【Nuxt.js】Firebase Authenticationでエラー（Error: [vuex] Do not mutate vuex store state outside mutation handlers.）

Nuxt.jsでFirebase Authenticationを使ってソーシャルログインを実装している際にタイトルのエラーが発生して解決までだいぶ時間がかかってしまったので二度と迷わないようにメモ。

問題があった箇所

FirebaseのsignInWithRedirectを使用してTwitterなりGoogleアカウントなりでログイン処理を行なったあとトリガーされるonAuthStateChangedで取得できるユーザー情報（user）をストアのLoginUserActionへ渡し、ストアのstateに挿入しようとしたところタイトルのエラーが発生した。

補足：Nuxt × Firebase Authenticationのこのあたりの書き方は色々ありますが、自分はログイン状態の変更を検知する以下部分をpluginsに登録しています（middlewareに書く人の方が多い気がする）。

import { auth } from '~/plugins/firebase.js'

export default (context) => {

  const { store } = context

  return new Promise((resolve, reject) => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        store.dispatch('login/setLoginUserAction', user)
      } else {
        store.dispatch('login/deleteLoginUserAction')
      }
      resolve()
    })
  })
}

解決方法

結論：引数userの渡し方がまずかった。

修正したコードは以下。

import { auth } from '~/plugins/firebase.js'

export default (context) => {

  const { store } = context

  return new Promise((resolve, reject) => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        const { uid, displayName, photoURL } = user
        store.dispatch('login/setLoginUserAction', { uid, displayName, photoURL })
      } else {
        store.dispatch('login/deleteLoginUserAction')
      }
      resolve()
    })
  })
}

エラーメッセージを最初見たときは「え？Actionでstate更新してないよ？？mutationで更新してるよ？？？」としばらく詰まってたが、そもそも値の渡し方がミスってたというオチだった。しょうもなあああああああ。

同じことで詰まってる人がすぐ解決しますように。

補足：上記では{ uid, displayName, photoURL }の3つを渡してますがもちろんここは必要に応じて渡したい値に変更してOKです。（uidだけ渡したいなら{ uid }とすればいい。）