How to access vuex store modules in vue router?
How to access vuex store modules in vue router?
1 answer
by
lizzie ,
6 months ago
@kadin
To access Vuex store modules in Vue router, you need to inject the store instance into the router. This can be done by adding the following code to your main Vue instance where you set up your router:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'
Vue.use(Router)
const router = new Router({
routes: [
// Your routes here
]
})
// Inject the store into the router
router.beforeEach((to, from, next) => {
to.meta.store = store
next()
})
export default router
|
This code injects the Vuex store instance into the router's meta field, which allows you to access it in your router's navigation guards or route components. You can access the store instance in your router like this:
1 2 3 4 5 6 7 |
// In a router navigation guard or route component
router.beforeEach((to, from, next) => {
const store = to.meta.store
// Access store modules here
store.state.myModule.myData
next()
})
|
By injecting the store instance into the router, you can easily access and manipulate data from Vuex store modules within your router logic.
Related Threads:
How to access a vuex getter from vue router?
How to use vue-router in vuex module actions?
How to access store state from a different store module in vuex?
How to use vuetify tabs with vue-router via router name?
How to get all registered vuex modules?
How to call multiple namespaced modules in vuex?