Как получить доступ к хранилищу Vuex из файла модуля маршрутизатора nuxt router.js файл?

#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 не будет доступен на стороне сервера