Vue.js 访问路由器中的存储

在进入

/dashboard

路径之前，我想在我的Vuex应用商店中检查用户是否具有

'admin'

角色。但我无法从

store.getters

正确访问数据

我使用Quasar（Vue.js）和Vuex+Typescript

在

routes.ts

文件中，在

beforeinter（）

函数中，我可以使用

console.log（store.myStore.getters）

从存储访问getters。在这里，我看到了

userInfos

内部：

我不明白为什么我只得到

{}

而没有得到

{…}

（注意，如果我点击它，我会看到它的内容）

但是如果我调用

console.log（store.myStore.getters.userInfos）

，我看不到以下数据：

这是

索引.ts

（路由器）：

从'quasar/wrappers'导入{route}
从“vue路由器”导入VueRouter
从“vuex”导入{Store}
从“../store”导入{StateInterface}
从“/routes”导入路由
导出默认路由（函数（{Vue}）{
Vue.use（VueRouter）
常量路由器=新的VueRouter({
滚动行为：（）=>（{x:0，y:0}），
路线，
模式：process.env.VUE_路由器_模式，
base:process.env.VUE_路由器_base
})
返回路由器
})

这是

路由.ts

（路由器）：

从“vue路由器”导入{RouteConfig}
常数路由：RouteConfig[]=[
{
路径：“/”，
组件：（）=>导入（'layouts/Login.vue'），
儿童：[
{路径：''，组件：（）=>import（'pages/Index.vue'）}，
{path:'/deltination'，组件：（）=>import（'pages/SignUp.vue'）}，
{path:'/connexion'，组件：（）=>import（'pages/signipage.vue'）}
]
},
{
路径：'/main'，
组件：（）=>import（'layouts/MainLayout.vue'），
儿童：[
{路径：''，组件：（）=>import（'pages/Index.vue'）}，
{路径：'/dashboard'，组件：（）=>import（'pages/DashboardB2B.vue'），
beforeEnter:（到、从、下一个）=>{
const store=require（“../store”）
console.log（“输入前”）
log（store.myStore.getters）
返回next（）；
}, },
{
路径：'/ajourn referentiel'，
组件：（）=>import（'pages/referentielmeter.vue'）
},
{
路径：'/init'，
组件：（）=>import（'components/bot/BotSkeleton.vue'）
}
]
},
{
路径：'/bot'，
组件：（）=>导入（'layouts/Bot.vue'），
儿童：[
{
路径：'/ajourn referentiel'，
组件：（）=>import（'pages/referentielmeter.vue'）
},
{
路径：'/init'，
组件：（）=>import（'components/bot/BotSkeleton.vue'）
}
]
},
//始终将此作为最后一个，
//但是你也可以移除它
{
路径：'*'，
组件：（）=>import（'pages/Error404.vue'）
}
]
导出默认路由

下面是

index.ts

和存储（Vuex）：

从“Vue”导入Vue
从'quasar/wrappers'导入{store}
从“Vuex”导入Vuex
Vue.use（Vuex）
从“./modules/matching”导入匹配
从“./modules/organigrame”导入组织
从“./modules/user”导入用户
导出接口状态接口{
示例：未知
}
让我看看myStore：有吗
导出默认存储（函数（{Vue}）{
Vue.use（Vuex）
const Store=新的Vuex.Store({
模块：{
匹配，
奥加，
使用者
},
//启用严格模式（增加开销！）
//仅适用于开发模式
严格：！！process.env.debug
})
myStore=商店
退货商店
})
导出{myStore}

EDIT:看起来像我的

控制台。日志在加载getter之前运行，因为当我签出Vue developer tools时，我看到了一切。如果在进入前
功能之前未加载存储区，我如何检查存储区？
试试这个

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

试试这个

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

我想async/await可能会对您有所帮助。无论何时尝试在路由器之前获取存储数据，请尝试async/await或promise。Hi@Nik.Developer，您知道我必须将此async/await放在何处吗？尝试了Async beforeEnter（）和await console.log（store.myStore.getters.userInfos），这是sameI guess Async/await可能对您有所帮助的方法。无论何时尝试在路由器之前获取存储数据，请尝试async/await或promise。Hi@Nik.Developer，您知道我必须将此async/await放在何处吗？尝试了Async beforeEnter（）并等待console.log（store.myStore.getters.userInfos），samei必须将其放在index.ts（router）上，使用router.before，因为我在routes.ts文件中有Route而不是router。我也有同样的问题。。。所以奇怪的是，请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，并且更有可能吸引更多的选票。我必须在index.ts（router）和router.before中添加说明。在每个原因之前，我在routes.ts文件中有Route而不是router。我也有同样的问题。。。所以奇怪的是，请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。