#javascript #nuxt.js #vue-router
#javascript #nuxt.js #vue-маршрутизатор
Вопрос:
- Я использую
nuxt-community/router-module
- Для этого требуется создать
router.js
файл, в который можно добавить глобальную конфигурацию маршрутизации - Как мне получить доступ к хранилищу из этого файла?
Комментарии:
1. вы пробовали просто импортировать хранилище
import store from '@/store'
?2. @SergeyMitrichev Ошибка типа: не удается прочитать свойство ‘state’ неопределенного, просто добавлено хранилище импорта из ‘@/ store’ внутри router.js файл и попытался получить доступ к переменной состояния внутри beforeEach
3. импортировать хранилище из ‘@ / store’ импортировать хранилище из ‘. / store’ ничего не работает, у второго есть эта ошибка, экспорт по умолчанию не найден в импортированном модуле «. / store»
Ответ №1:
Вы можете получить доступ к хранилищу через корневой контекст, который Nuxt предоставляет во window.$nuxt
внешних компонентах Vue:
// router.js
import Router from 'vue-router'
export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions ? routerOptions : createDefaultRouter(ssrContext).options
const router = new Router({
...options
})
if (process.client) {
router.beforeEach((to, from, next) => {
// Since `beforeEach` is invoked before `window.$nuxt` is
// initialized, use `setTimeout` without a timeout to wait
// until the next macro tick.
setTimeout(() => {
window.$nuxt.$store.dispatch('myAction')
})
next()
})
}
return router
}
Если бы единственной причиной использования @nuxtjs/router
module было добавление beforeEach
перехвата маршрутизатора, вы могли бы сделать это с помощью плагина Nuxt:
// plugins/router.js
export default ({ app, store }) => {
app.router.beforeEach((to, from, next) => {
store.dispatch('myAction')
next()
})
}
// nuxt.config.js
export default {
plugins: [
'~plugins/router.js'
]
}
Комментарии:
1. window.$ nuxt не будет доступен на стороне сервера