想象一下这个简单的例子。您有一个 Vue JS 应用程序，用户可以在其中创建任务列表并对它们进行排序。这些列表应由服务器存储在数据库中。假设我们有一个ListComponent它完成了大部分用户体验。
我的问题是，我应该使用哪种模式来处理前后端数据同步？
A) 通过vuex：将活动列表（正在显示、编辑或创建的列表）存储在 vuex 中store. The ListComponent将改变store and then，对列表所做的更改将通过 API 发送到后端。
B) 直接进入服务器：直接读取和写入ListComponent每次显示、编辑或创建列表时发送到服务器。
如果遵循A，商店应该有什么架构？我应该如何以及何时启动同步？我如何跟踪哪些内容发生了变化，哪些内容没有变化？
根据您的用例，两者都可能是正确的。我当前正在构建的应用程序同时使用了两者。
何时使用 B：直接访问服务器如果数据非常重要且需要保存，请使用 B。在这种情况下，您可能希望直接访问服务器并提供响应以验证它是否已提交到数据库。我们使用此流程来更改管理员类型。请注意，您还可以在服务器响应后更新 Vuex，并仍然使用 Vuex 来提供数据。
何时使用 A：通过 Vuex如果您需要更快的体验，请使用 A，因为无需等待服务器。在实际保存之前，您必须能够乐观地显示更改。另一个好处是您可以同步Vuex 到本地存储 https://github.com/robinvdvleuten/vuex-persistedstate。我们将其用于用于自定义视图的用户首选项。为了等待获取这些而减慢页面速度是一种糟糕的体验。
使用方法A：通过Vuex有几种方法可以做到这一点。这是一种模式：
- 从组件调度 Vuex Action 1
- 从更新状态的 Action 提交 Vuex Mutation - 这是一个乐观的更新，因为您假设它会经历
- 从 Action 1 调度另一个 Vuex Action 2 - 这假设您将在多个 Action 中重用此 Action，否则它可以全部进入 Action 1
- 动作2发送数据到服务器
- Promise 返回后，Action 2 提交变更以更新 Vuex 状态
- 突变需要处理任何差异（或错误）
算一下Vuex的成本
就像你的评论所示，如果你需要使用 Vuex，最好计算一下成本，因为它确实增加了很多开销和复杂性。理想的情况是，以包含与一种数据类型（例如“列表”）的所有交互的方式编写组件，这样您就不必通过 Vuex 共享状态。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
