title: Passing vuex module state into vue-router during beforeEach
body: <p>I am using VueJS in conjunction with <code>vuex</code> and <code>vue-router</code>. I have a <code>vuex</code> module that is making a mutation to its store, and trying to use that to determine whether or not a user is authenticated.</p>
  
  <p>Here is what my code looks like in relevant part.</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import store from './store'
  import router from './router'
  
  router.beforeEach((to, from, next) =&gt; {
      console.log(router.app) // prints a Vue$2 object
      console.log(router.app.$store) // undefined
      console.log(store.getters.isAuthenticated) // false
      ...
  }
  
  const app = new Vue({
    store,
    router,
    ...App
  })
  
  app.$mount('#app')
  </code></pre>
  
  <p><strong>/store/index.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import core from './modules/core'
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    modules: {
      core: core
    }
  })
  
  export default store
  </code></pre>
  
  <p><strong>/store/modules/core.js</strong></p>
  
  <pre><code>import * as types from '../types'
  import api from '../../api'
  import router from '../../router'
  
  const state = {
    token: null,
    user: null,
    authenticated: false
  }
  
  const mutations = {
    [types.LOGIN_SUCCESS] (state, payload) {
      console.log('mutate')
      state.token = payload.token
      state.user = payload.user
      state.authenticated = true
      router.go('/')
    }
  }
  
  const getters = {
    isAuthenticated: state =&gt; {
      return state.authenticated
    }
  }
  
  const actions = {
    [types.LOGIN] (context, payload) {
      api.getToken(payload).then(response =&gt; {
        context.commit(types.LOGIN_SUCCESS, response)
      })
    }
  }
  
  export default {
    state,
    mutations,
    actions,
    getters
  }
  </code></pre>
  
  <p>When I go thru my logic to trigger the <code>LOGIN</code> action, I can see that the mutation executed properly, and when I use the Chrome extension to view the vuex state for my <code>core</code> module, the state for <code>user</code> and <code>authenticated</code> have been properly mutated.</p>
  
  <p><strong>QUESTION</strong></p>
  
  <p>It seems like this module just simply has not been loaded by the time the router is running in the <code>.beforeEach</code> loop. Is this true?</p>
  
  <p>If yes, what are some other suggestions on how to handle this situation?
  If no, what am I doing incorrect?</p>