vue.js - 访问存储在路由器中

Question

我想在我的 Vuex 商店中查看用户是否拥有 'admin'进入前的角色/dashboard路线。但我无法正确访问来自 store.getters 的数据.
我使用 Quasar (Vue.js) 和 Vuex + Typescript。
在 routes.ts文件，在 beforeEnter()功能，我可以使用 console.log(store.myStore.getters) 从商店访问 getter .我在这里看到 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在加载 getter 之前运行，因为当我查看 Vue 开发人员工具时，我看到了一切。如果商店本身没有在 beforeEnter 之前加载，我如何检查商店功能？

Answer 1

请尝试这样

store.myStore.getters["userInfos"]