How to use vuex store without access to vue instance?

[Fragster]

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?

[tof06]

@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'

[blakeyuk]

Excellent! Two years later, and still useful. Thanks @tof06