Nuxt.js + Firebase Authenticate で「Do not mutate vuex store state outside mutation handlers」のエラーが出る

Question

Nuxt.js と Firebase を使用して、ユーザー認証機能を作成しています。
Firebase から受け取った値をコールバックで state に保存し、ログイン状態を管理しようと思っていますが、
下記のサンプルのようにリダイレクトした後に表題のエラーが表示されます。

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

コードは下記になります。

// pages/login.vue

<template>
  <!-- 省略 -->
</template>

<script>
import firebase from '~/plugins/firebase.js'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data: function() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    ...mapActions(['setUser']),
    login: function() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(user => {
          this.setUser(user)
          this.$router.push('/')
        })
        .catch(error => {
          alert(error.message)
        })
    }
  }
}
</script>

// store/index.js
export const state = () => ({
  user: null
})

export const getters = {
  isAuthenticated(state) {
    return !!state.user
  }
}

export const mutations = {
  setUser(state, payload) {
    state.user = payload
  }
}

export const actions = {
  setUser({ commit }, user) {
    commit('setUser', user)
  }
}

いくつかのブログを拝見すると、 export const strict = false を追記すれば解決するという記載があり、確かにエラーは消えました。
ただ、 Action を通して Mutations の中でのみ変更しているつもりなので、なぜ厳格モードをオフにすれば良いのかが分かりません。

また、 Firebase を使用せず、 pages/login.vue を下記のようにすれば問題ないことから Firebase に関する文法が誤っているのではないかと推測しています。

// pages/login.vue
<script>
import firebase from '~/plugins/firebase.js'
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions(['setUser']),
    login: function() {
      this.setUser({ user: 'test' })
      this.$router.push('/')
    }
  }
}
</script>

まとめますと、質問したい内容は下記になります。

1. Firebase Authenticate を使用したログイン情報を store に保存する場合の記述方法について、誤りや勘違いがあるか？
2. Mutations の中でしか値を変更していないつもりだが、他に変更される箇所はあるのか？（もしくは、エラー判定されるような部分）

コードにつきましては、不足ありましたら追記いたします。
以上、よろしくお願いいたします。

Answer 1

私もおそらく同じようなサンプルコードを参考に書いて困り、解決策がわかりましたので回答します。

こちらの記事を見て直すことができました。

this.setUser(user)

としてしまうこと自体がまずいようです。このuserは色々な値やオブジェクトが入っていて、setUserしたあとにも色々使われてしまうためにエラーとなっているようです。

従って必要な値のみを取り出し、それらをあたらしいオブジェクトにしてsetUserすれば良いです。参考記事の受け売りではありますが、以下のように対応して事なきをえました。

const { uid, email, displayName } = user
this.setUser({ uid, email, displayName })

Comments

[naoki855]

ご返信がとても遅くなり、申し訳ありません。。！
わざわざご回答いただきありがとうございます。
参考にさせていただきます。