How to use vuex store without access to vue instance?

  • E.g in beforeRouteEnter hook?
    I try make it in this way (store is dynamically filled in boot folder):

    import StoreFunction from 'store';
    const store = StoreFunction();
    export default {
      beforeRouteEnter(to, from, next) {
        if (store.state.catalog.loading) next({to: 'routename'});
        else next();

    but it causes an error “do not mutate vuex store state outside mutation handlers.”

    to fix it, I change store/index.js to return store instance instead of function, and it works. But I’m worrying about possible side effects of this ‘fix’.

    //export default function(/* { ssrContext } */) {
      export default new Vuex.Store({

    Is this right fix, or there is another ‘proper’ way in my case?

  • @Fragster
    It should be confirmed by a more a experienced dev than me, but if you’re not building for SSR mode, you can export directly the Store instance like you did.

    What I’ve done is something similar :

    const Store = new Vuex.Store({...})
    export { Store }
    export default function (/* ssrContext */) {
      return Store

    This way, I export both the function (default export), and the instance
    And, when I need to access Store outside component, I just import { Store } from 'src/store'

Log in to reply