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 justimport { Store } from 'src/store'