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

最近我设计了一个网站，将用户分为“用户”/“管理员”两个角色进行登录。
不同的角色将登录同一页面，但会看到不同的按钮和功能

MainPage.vue

是容器，因此我调用ajax“/init”来获取用户信息，然后提交到Vuex商店。
然后

Content.vue

是

MainPage.vue

中的子页面。它将通过

$store.state.user

消息显示不同的按钮

但是，我想在

Content.vue内的
mounted
stage中根据用户角色调用不同的api。

但是这个角色在这个阶段还没有准备好，它是由名为“/init”的ajax提交的

总流量为

//MainContent.vue

beforeCreate: async function () {
            await axios.post('/init').then(response => {
                if(response && response.data && response.data.data){
                    this.$store.commit("login", response.data.data)   
                }
            })
        }

mounted: async function() {
    try {
      console.log(this.$store, this.$store.state.user, this.$store.getters.isAdmin)
      // no value here 
}

//Content.vue

beforeCreate: async function () {
            await axios.post('/init').then(response => {
                if(response && response.data && response.data.data){
                    this.$store.commit("login", response.data.data)   
                }
            })
        }

mounted: async function() {
    try {
      console.log(this.$store, this.$store.state.user, this.$store.getters.isAdmin)
      // no value here 
}

我已经检查了vue组件生命周期，并看到父组件的
beforeCreate
将在子组件的
挂载之前被调用。

即使是异步函数，生命周期方法也会按顺序调用吗？

我应该如何解决这个问题

感谢您可以通过将
v-if
指令附加到
Content
组件，延迟
内容的初始化，直到
用户
状态在Vuex中可用。只需确保在Vuex状态下使用
null
初始化
user

<!-- MainPage.vue -->
<template>
  <Content v-if="$store.state.user" />
</template>



现在
this.$store.state.user
以及依赖它的所有内容都应该可以从
Content
组件的
挂载的
生命周期钩子中获得。
您的组件生命周期将不是处理这种情况的可靠方法，因为您使用的是异步调用来获取用户数据。我建议显示加载状态覆盖，并使用
mapGetters
访问存储。这将提供一种反应机制，让您知道用户数据何时可用。以下是单个文件组件的总体思路：

computed: {
    ...mapGetters({
        getLoggedInUser: 'GET_LOGGED_IN_USER',
        getIsUserAdmin: 'GET_IS_USER_ADMIN',
    })
}

....

<template>
    <content-overlay v-if="!getLoggedInUser">
         Loading...
    </content-overlay>

    ....
    <button v-if="getIsUserAdmin">Admin Button</button>
    <button v-if="!getIsUserAdmin">Regular User Button</button>

</template>

计算：{
…地图绘制者({
getLoggedInUser:'GET_LOGGED_IN_USER'，
getIsUserAdmin:'GET_是_用户_管理员'，
})
}
....
加载。。。
....
管理按钮
普通用户按钮