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

Question

我正在 Laravel 6 + Vue + Vuex 中创建聊天应用程序。我想调用vuex存储并在调度动作完成后获取状态，然后在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
    });
}

action.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;
},

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

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

getters.js

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

我还尝试了在然后在 mounted 中调用计算属性，但是它没有用。另外，是否应该像在中那样在 action.js 中的 setContacts 的console.log之后的挂载运行中“调用调度”？谢谢！

Answer 1

也许您可以将axios调用包装在另一个promise中。

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

让我知道会发生什么。它正在为我尝试过的一个小型演示工作。