Firebase Authenticationで「[vuex] Do not mutate vuex store state outside mutation handlers.」エラー #JavaScript

直接VuexのStateを変更しているつもりはないにも関わらず、タイトルのエラーが出てしまった。

具体的には以下のようなコードだった。

 firebase.auth().onAuthStateChanged(user => {
      this.$store.dispatch("mutateUserData", user);
  });

原因

Googleアカウントでのログイン状態が変化したとき、Stateを変更するActionを発行するというものだ。

一見問題なさそうに見えるが、この user は色々プロパティがあってログイン状態の変化により勝手に色々と書き換わるらしい。

上記のやり方だと参照渡し（っぽい奴）なので、その時に直接Stateが書き換えられたと見なされてしまうんだと思う。

解決策

 firebase.auth().onAuthStateChanged(user => {
      const { uid, displayName } = user;
      this.$store.dispatch("mutateUserData", { uid, displayName });
  });

こんな感じで、オブジェクトを直接渡さないようにすれば良い。

自分の場合はついでに必要なプロパティだけ取得するようにした。