分派动作后获取 vuex 存储状态

Question

我正在Laravel 6 + Vue + Vuex创建一个聊天应用程序。我想调用 vuex store 并在调度操作完成后获取状态，然后我想在 vue 组件中对该状态进行一些处理。

在ChatWindow组件中

mounted: function () {
    this.$store.dispatch('setContacts').then(() => {
        console.log('dispatch called')
        // I want to call the getter here and set one of the data property
    });
}

动作.js

setContacts: (context) => {
    axios.post('/users').then(response => {
        let users = response.data;
        // consoled for testing
        console.log(users);
        context.commit('setContacts', users);
    });
}

mutators.js

setContacts: (state, users) => {
    state.contacts = users;
},

请参阅下面的屏幕截图。调度的 then 方法在action.js中的setContacts之前运行。

我需要在完成调度操作后调用getter。（这将有效地设置联系人状态）。然后，我想像这样通过getContacts getter获取联系人。

getters.js

getContacts: (state) => {
    return state.contacts;
}

我还尝试在安装的then中调用计算属性，但它不起作用。另外，是否应该像 then 方法中那样在action.js中setContacts的 console.log 之后挂载运行中“调度调用” ？谢谢！

Answer 1

也许你可以将 axios 调用包装在另一个承诺中。

return new Promise((resolve, reject) => {

   axios.post('/users')
     .then(response => {
        let users = response.data;
        // consoled for testing
        console.log(users);
        context.commit('setContacts', users);
        resolve('Success')
     })
     .catch(error => {
        reject(error)
     })

})

进而

this.$store.dispatch('setContacts')
   .then(() => {
       console.log('dispatch called')
       console.log('getter ', this.$store.getters.contacts)
   });

让我知道发生什么事。它适用于我尝试过的一个小型演示。