想象一下这个简单的例子。您有一个 Vue JS 应用程序，用户可以在其中创建任务列表并对其进行排序。这些列表应该由服务器存储在数据库中。假设我们有一个 ListComponent，它负责大部分的用户体验。
我的问题是，我应该使用哪种模式来处理前后端数据同步？
A) 通过 vuex:将事件列表(正在显示、编辑或创建的列表)存储在 vuex store 中。 ListComponent 将更改 store，然后，对列表所做的更改将通过 API 发送到后端。
B) 直接访问服务器:每次显示、编辑或创建列表时，直接从 ListComponent 读取和写入服务器。
如果遵循 A，商店应该采用什么架构？我应该如何以及何时启动同步？我如何跟踪已更改和未更改的内容？
最佳答案
两者都可能正确，具体取决于您的用例。我目前正在构建的应用程序同时使用了这两者。
何时使用 B:直接转到服务器 如果数据非常重要，需要保存，请使用 B。在这种情况下，您可能希望直接转到服务器并提供响应以验证它是否已提交给数据库。我们将此过程用于管理类型更改。请注意，您还可以在服务器响应后更新 Vuex，并仍然使用 Vuex 来提供您的数据。
何时使用 A:通过 Vuex 如果您需要更快的体验，请使用 A，因为无需等待服务器。在实际保存之前，您必须乐观地显示更改。另一个好处是您可以同步 Vuex to localStorage .我们将其用于用于自定义 View 的用户首选项。只是为了等待获取这些页面而放慢页面速度是一种糟糕的体验。
使用方法一:通过Vuex走 有几种方法可以做到这一点。这是一种模式:
- 从组件调度 Vuex Action 1
- 从更新状态的 Action 提交 Vuex 突变 - 这是一个乐观的更新，因为您假设它会通过
- 从 Action 1 调度另一个 Vuex Action 2 - 这假设您将在多个 Action 中重用此 Action，否则它可以全部进入 Action 1
- Action 2 向服务器发送数据
- 在 promise 返回后，Action 2 提交突变以更新 Vuex 状态
- 突变需要处理任何差异(或错误)
统计Vuex的成本
如您的评论所示，如果您完全需要使用 Vuex，最好计算一下成本，因为它确实会增加很多开销和复杂性。理想的做法是以包含与一种数据类型(例如“列表”)的所有交互的方式编写您的组件，这样您就不必通过 Vuex 共享状态。
关于vue.js - 与服务器同步 vuex 状态的推荐策略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43572532/