Passing vuex module state into vue-router during beforeEach : <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>
