2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-11-20

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

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

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

:bomb: 原因

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

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

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

:star: 解決策

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

こんな感じで、オブジェクトを直接渡さないようにすれば良い。
自分の場合はついでに必要なプロパティだけ取得するようにした。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?