何时初始化 Vue 和 Vuex 状态

Question

最近我设计了网站，用户被分成"用户"/"管理员"两个角色来登录。
不同的角色将登录同一页面，但看到不同的按钮和功能。

MainPage.vue是容器，所以我调用 ajax "/init" 来获取用户信息，然后提交到 Vuex 存储。
然后Content.vue是MainPage.vue内的子页面。它将通过$store.state.user消息显示不同的按钮。

但是，我想根据用户的角色在Content.vue内部mounted阶段调用不同的 api。
但是在这个阶段，由ajax提交的名为"/init"的角色不会准备好。

整体流程为
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)   
                }
            })
        }

Content.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

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

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

现在this.$store.state.user和依赖于它的所有内容都应该可以从组件的mounted生命周期钩子中获得Content。

Answer 2

您的组件生命周期不是处理这种情况的可靠方法，因为您正在使用异步调用来获取用户数据。我建议显示加载状态叠加并使用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>