vuex ajax调用和几个组件

Question

我想了解使用vuex和多个组件共享此调用数据的ajax调用的最佳做法。

我是否在商店中存储该调用的加载，成功和错误属性，以便它一直填充到组件中？我不确定最好的方式。我也不想从所有组件中调用ajax，因为这样就失去了一次调用它的目的。

现在我按照上面提到的那样存储：

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

我为EACH api调用执行此操作，然后将其存储在那里。有更好的方法吗？

Answer 1

This article描述了一些实现ajax调用和更新vuex状态的模式。我个人同意作者的观点，即将ajax调用vyex存储的方法3作为动作，因为正如文章指出的那样，它将状态和表示逻辑分离。这也很有用，因为您可以从您的操作中返回一个承诺，以了解状态何时可以变异

文章中的代码示例：

{{1}}

因此，您可以在此处看到，ajax调用被封装为vuex操作。在依赖于来自ajax调用的数据的组件中，组件可以执行操作（此。$ store.dispatch（＆＃39; refreshMessage＆＃39;）然后...）将进行ajax调用并更新商店里的数据。由于您的组件已具有依赖于商店数据的反应属性，因此一旦商店拥有新数据，它将自动更新。