最近在设计网页,把用户分成"user"/"admin"两个角色登录。
不同的角色会登录同一个页面,但会看到不同的按钮和功能。
MainPage.vue
是容器,所以我调用 ajax“/init”来获取用户信息,然后提交到 Vuex 存储。
那么Content.vue
就是MainPage.vue
里面的子页面。它会通过 $store.state.user
消息显示不同的按钮。
但是,我想根据用户的角色在 Content.vue
中的 mounted
阶段调用不同的 api。
但是这个角色不会被准备好,在这个阶段被称为“/init”的ajax提交。
整体流程是
//主内容.vue
beforeCreate: async function () {
await axios.post('/init').then(response => {
if(response && response.data && response.data.data){
this.$store.commit("login", response.data.data)
}
})
}
//内容.vue
mounted: async function() {
try {
console.log(this.$store, this.$store.state.user, this.$store.getters.isAdmin)
// no value here
}
我检查了 vue 组件的生命周期,发现父级的 beforeCreate
会在子级的 mounted
之前被调用。
即使是异步函数,生命周期方法也会按顺序调用吗?
我应该如何解决这个问题?
谢谢
最佳答案
您可以延迟 Content
组件的初始化,直到 user
状态在 Vuex 中可用,方法是将 v-if
指令附加到内容
组件。只需确保在 Vuex 状态下使用 null
初始化 user
。
<!-- MainPage.vue -->
<template>
<Content v-if="$store.state.user" />
</template>
现在 this.$store.state.user
以及依赖于它的所有内容都应该可以从 Content
组件的 mounted
生命周期 Hook 中获得。
关于vue.js - 何时初始化 vue 和 vuex 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48374270/