页面呈现后变异完成，数据为空，异步操作

问题描述

感谢您的帮助！我有一个Vuex商店，其中有数据数组。我用一个突变设置了这个数组。突变是由一个动作引起的。我的问题是，在呈现页面并且我有一个空数组之后，变异完成了。在我的组件中，我尝试使用Vuex getter在创建/挂接钩子期间获取数据。但是它总是空的。我

    mutations: {
      setLeaderboard(state,payload) {
        state.leaderboard = payload;
        console.log('inside mutation');
    },

我的操作是异步的，因此我等待数据库的承诺。在获取所有数据并将其存储到数组中之后，我要提交此数据。

 actions: {
    async fetchLeaderboard(context) {
        let leaderboard = [];

        await database.collection('users').onSnapshot(snapshot => {
                leaderboard.push(snapshot.data());
            });

            context.commit('setLeaderboard',leaderboard);
            console.log('commited');
        });

在需要数据的组件中，我只是尝试对其进行控制台。

    mounted() {
      console.log(this.$store.getters['leader/leaderboard']);
},

我的解决方案是创建一个额外的init操作，该操作返回一个promise，我可以在安装vue应用之前在main.js中使用它

        initLeaderboard(context) {
        return new Promise(resolve => {
            setTimeout(() => {
                context.dispatch('leader/fetchLeaderboard',null,{
                    root: true,});
                resolve('DoneLeader');
            },1000);
        });
    },

main.js

 store
    .dispatch('init')
    .then(log => {
        console.log(log);
    })
    .then(() => {
        store
            .dispatch('initLeaderboard')
            .then(log => {
                console.log(log);
            })
            .then(() => {
                new Vue({
                    vuetify,router,store,render: h => h(App),}).$mount('#app');
            });
    });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）