Блог

Я хотел бы проверить в моем хранилище Vuex, есть ли у пользователя 'admin' роль, прежде чем вводить /dashboard маршрут. Но я не могу правильно получить доступ к данным store.getters .

Я использую Quasar (Vue.js ) и Vuex Typescript.

В routes.ts файле, в beforeEnter() функции, я могу получить доступ к получателям из хранилища с помощью a console.log(store.myStore.getters) . Здесь я вижу userInfos внутри:

Я не понимаю, почему я получаю только {} , а не {...} (обратите внимание, что если я нажму на него, я увижу его содержимое).

Но если я звоню console.log(store.myStore.getters.userInfos) , я не вижу данных:

Вот index.ts (маршрутизатор):

 import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import { Store } from 'vuex'
import { StateInterface } from '../store'
import routes from './routes'

export default route<Store<StateInterface>>(function ({ Vue }) {
  Vue.use(VueRouter)

  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
})
 

Вот routes.ts (маршрутизатор):

 import { RouteConfig } from 'vue-router'

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/Login.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/inscription', component: () => import('pages/SignUp.vue') },
      { path: '/connexion', component: () => import('pages/SignInPage.vue') }
    ]
  },

  {
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/dashboard', component: () => import('pages/DashboardB2B.vue'),
          beforeEnter: (to, from, next) => {
            const store = require('../store')
            console.log("before enter")
            console.log(store.myStore.getters)
            return next();
        }, },
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },
  {
    path: '/bot',
    component: () => import('layouts/Bot.vue'),
    children: [
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes
 

И вот index.ts с хранилищем (Vuex):

 import Vue from 'vue'
import { store } from 'quasar/wrappers'
import Vuex from 'vuex'
Vue.use(Vuex)

import matching from './modules/matching'
import orga from './modules/organigrame'
import user from './modules/user'

export interface StateInterface {
  example: unknown
}

let myStore: any

export default store(function({ Vue }) {
  Vue.use(Vuex)

  const Store = new Vuex.Store<StateInterface>({
    modules: {
      matching,
      orga,
      user
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEBUGGING
  })

  myStore = Store

  return Store
})

export {myStore}
 

РЕДАКТИРОВАТЬ: похоже, мои console.log запуски выполняются до загрузки геттеров, потому что, когда я проверяю инструменты разработчика Vue, я вижу все. Как я могу проверить хранилище, если само хранилище не загружается перед beforeEnter функцией?

пожалуйста, попробуйте вот так

 store.myStore.getters["userInfos"]
 

попробуй это

 router.beforeEach(async(to, from, next) => {
    const userInfo = await store.getters.userInfos;
    console.log(userInfo);
});