title: Vuex & VueJS (Do not mutate vuex store state outside mutation handlers)
body: <p>I'm trying to create a <strong>listenAuth</strong> function that watches "<strong>onAuthStateChanged</strong>" in <strong>firebase</strong> to notify the <strong>vuex store</strong> when a user has logged in or out. As far as I can tell, I'm only modifying state.authData using the mutation handler, unless I'm missing something?</p>
  
  <p><strong>I'm getting the error:</strong></p>
  
  <pre><code>[vuex] Do not mutate vuex store state outside mutation handlers.
  </code></pre>
  
  <p><strong>Here's my App.vue javascript (from my component)</strong></p>
  
  <pre><code>&lt;script&gt;
  // 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 =&gt; state.authData,
        user: state =&gt; state.user
      }
    },
    components: {
      // Navigation
    },
    watch: {
      authData (val) {
        if (!val) {
          this.redirectLogin
          this.$route.router.go('/login')
        }
      }
    },
    methods: {
      listenAuth: function () {
        firebase.auth().onAuthStateChanged((authData) =&gt; {
          this.changeAuth(authData)
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here's my action (changeAuth) function</strong> </p>
  
  <pre><code>export const changeAuth = ({ dispatch, state }, authData) =&gt; {
    dispatch(types.AUTH_CHANGED, authData)
  }
  </code></pre>
  
  <p><strong>Here's my store (the parts that matter)</strong></p>
  
  <pre><code>const mutations = {
    AUTH_CHANGED (state, authData) {
      state.authData = authData
    }
  }
  
  const state = {
    authData: {}
  }
  </code></pre>