Vue.js vuex ajax调用和几个组件

我想知道使用vuex和多个组件共享此调用数据的ajax调用的最佳实践是什么

我是否将该调用的loading、success和error属性存储在存储中，以便它一直填充到组件？我不知道最好的办法是什么。我也不想从所有组件中调用ajax，因为这会破坏一次调用ajax的目的

现在，我正在存储上面提到的内容：

new Vuex.Store({
    state: {
        persons: {
             data: null,
             loading: false,
             error: null
        }
    }
});

我对每个api调用都这样做，然后将其存储在那里。有更好的方法吗？

介绍了一些实现ajax调用和更新vuex状态的模式。我个人同意作者的观点，即将ajax调用作为操作移动到vuex存储的方法3，因为正如本文所指出的，它将状态和表示逻辑解耦。这也很有帮助，因为您可以从您的操作中返回一个承诺，以了解状态何时可以发生变化

文章中的代码示例：

store = new Vuex.Store({
    state: {
        message: ''
    },
    mutations: {
        updateMessage(state, payload) {
            state.message = payload
        }
    },
    actions: {
        refreshMessage(context) {
            return new Promise((resolve) => {
                this.$http.get('...').then((response) => {
                    context.commit('updateMessage', response.data.message);
                    resolve();
                });
            });
        }
    }
});

Vue.component('my-component', {
    template: '<div>{{ message }}</div>',
    methods: {
        refreshMessage() {
            this.$store.dispatch('refeshMessage').then(() => {
            // do stuff
        });
        }
    },
    computed: {
        message: { return this.$store.state.message; }
    }
});

store=新的Vuex.store({
声明：{
消息：“”
},
突变：{
更新消息（状态、有效负载）{
state.message=有效负载
}
},
行动：{
刷新消息（上下文）{
返回新承诺（（解决）=>{
这是.http.get（“…”）。然后（（响应）=>{
commit（'updateMessage'，response.data.message）；
解决（）；
});
});
}
}
});
Vue.component（“我的组件”{
模板：“{message}}”，
方法：{
刷新消息（）{
这是.$store.dispatch（'refeshMessage'）。然后（（）=>{
//做事
});
}
},
计算：{
消息：{返回此。$store.state.message；}
}
});

正如您在这里看到的，ajax调用被封装为vuex操作。在依赖于来自ajax调用的数据的组件中，该组件可以执行操作（此.$store.dispatch（'refreshMessage'）。然后…），该操作将进行ajax调用并更新存储中的数据。由于您的组件已经具有依赖于存储区数据的被动属性，因此一旦存储区有了新数据，它将自动更新