将vuex状态与服务器同步的推荐策略

Question

Immagine this case。您有一个Vue JS应用程序，用户可以在其中创建任务列表并对其进行排序。这些列表应该由服务器存储在数据库中。假设我们有一个ListComponent，它可以完成UX的大部分工作。

我的问题是，我应该使用哪种模式来处理前端和后端数据同步？

A）经过vuex：将活动列表（正在显示，编辑或创建的列表）存储在vuex store中。 ListComponent将更改store和，然后，对列表所做的更改将通过API发送到后端。

B）直接进入服务器：每次显示，编辑或创建列表时，直接从ListComponent读取并写入服务器。

如果遵循A，商店应该采用哪种架构？我应该如何以及何时开始同步？我怎样才能跟踪已经发生了什么变化？

Answer 1

根据您的使用情况，两者都可以正确。我目前正在建设的应用程序使用两者。

何时使用B：直接前往服务器 如果数据非常重要，请使用B.在这种情况下，您可能希望直接访问服务器并提供响应以验证它已提交给数据库。我们使用此过程进行管理员类型更改。请注意，您也可以在服务器响应后更新Vuex，并仍然使用Vuex来提供数据。

何时使用答：通过Vuex 如果因为没有等待服务器而需要更快的体验，请使用A.在实际保存之前，您一定要乐观地显示更改。另一个好处是你可以同步Vuex to localStorage。我们将此用于用于自定义视图的用户首选项。这是一个糟糕的经历，只能放慢页面的速度以等待获取这些页面。

如何使用答：通过Vuex 有几种方法可以做到这一点。这里有一个模式：

1. 调度Vuex操作1组件
2. 提交从行动Vuex突变更新状态 - 这是一个乐观的更新为你假定它会经过
3. 派遣另一Vuex行动2从操作1 - 这是假设你将重用在多个操作这个动作，否则就都走在行动1
4. 行动2将数据发送到服务器
5. 在承诺的回报，行动2承诺突变更新Vuex状态
6. 突变需要处理任何差异（或错误）

计数Vuex成本

像您的评论显示，其良好的算成本，如果你需要使用Vuex可言，因为它确实会增加很多开销和复杂性。理想的做法是编写组件，以便包含与一种类型数据（如“列表”）的所有交互，这样您就不必通过Vuex共享状态。