Question

最近我将用户分成的网页设计为＆＃34; user＆＃34; /＆＃34; admin＆＃34;登录的两个角色不同的角色会登录同一页面，但会看到不同的按钮和功能。

template <class RandomAccessIterator, class Compare> void sort (RandomAccessIterator first, RandomAccessIterator last, Compare comp);是容器所以我称之为ajax＆＃34; / init＆＃34;获取用户信息然后提交到Vuex商店然后getTrainPerf是MainPage.vue内的子页面。它将通过Content.vue消息显示不同的按钮。

但是，我想根据用户的角色在MainPage.vue $store.state.user内的mounted阶段调用不同的api。
但是没有准备好这个角色，这个角色被ajax称为＆＃34; / init＆＃34;在这个阶段。

整体流程为
// MainContent.vue

Content.vue

// 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)   
                }
            })
        }

我检查了vue组件生命周期，并且在mounted: async function() { try { console.log(this.$store, this.$store.state.user, this.$store.getters.isAdmin) // no value here }孩子之前看到了父beforeCreate。生命周期方法是否会按顺序调用，即使它们是异步函数？我该如何解决这个问题？

由于

Answer 1

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

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

现在this.$store.state.user以及依赖于它的所有内容都应该来自Content组件的mounted生命周期钩子。

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>

何时初始化vue和vuex状态

2 个答案: