javascript - Vuex と VueJS (ミューテーション ハンドラの外部で vuex ストアの状態を変更しないでください)

Question

ユーザーがログインまたはログアウトしたときにvuex ストアに通知するために、firebaseで「 onAuthStateChanged」を監視するlistenAuth関数を作成しようとしています。私が知る限り、何かが欠けていない限り、ミューテーションハンドラーを使用して state.authData のみを変更していますか?

エラーが発生します：

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

これが私のApp.vue JavaScriptです（私のコンポーネントから）

<script>
// import Navigation from './components/Navigation'
import * as actions from './vuex/actions'
import store from './vuex/store'
import firebase from 'firebase/app'

export default {
  store,
  ready: function () {
    this.listenAuth()
  },
  vuex: {
    actions,
    getters: {
      authData: state => state.authData,
      user: state => state.user
    }
  },
  components: {
    // Navigation
  },
  watch: {
    authData (val) {
      if (!val) {
        this.redirectLogin
        this.$route.router.go('/login')
      }
    }
  },
  methods: {
    listenAuth: function () {
      firebase.auth().onAuthStateChanged((authData) => {
        this.changeAuth(authData)
      })
    }
  }
}
</script>

これが私のアクション（changeAuth）関数です

export const changeAuth = ({ dispatch, state }, authData) => {
  dispatch(types.AUTH_CHANGED, authData)
}

ここが私の店です (重要な部分)

const mutations = {
  AUTH_CHANGED (state, authData) {
    state.authData = authData
  }
}

const state = {
  authData: {}
}