How to access async store data in vue-router for usage in beforeEnter hook?

You can do it by returning a promise from vuex action, as it is explained here and call the dispatch from within the beforeEnter itself.

Code should look like following:

import store from './vuex/store';


// following is an excerpt of the routes object:
{
  path: '/example',
  component: Example,
  beforeEnter: (to, from, next) =>
  {
    store.dispatch('initApp').then(response => {
        // the above state is not available here, since it
        // it is resolved asynchronously in the store action
    }, error => {
        // handle error here
    })         
  }
}

Leave a Comment