Asynchronous 页面呈现、空数据、异步操作后突变完成

谢谢你的帮助！我有一个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');
        });

在需要数据的组件中，我只是尝试console.log

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

我的解决方案是创建一个额外的init操作，它返回一个承诺，我可以在安装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');
            });
    });