vue.js - 何时初始化 vue 和 vuex 状态

Question

最近在设计网页，把用户分成"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 之前被调用。
即使是异步函数，生命周期方法也会按顺序调用吗？
我应该如何解决这个问题？

谢谢

Answer 1

您可以延迟 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 中获得。