与服务器同步 vuex 状态的推荐策略
Recommended strategy to sync vuex state with server
想象一下这个简单的例子。您有一个 Vue JS 应用程序，用户可以在其中创建任务列表并对其进行排序。这些列表应该由服务器存储在数据库中。假设我们有一个 ListComponent 来完成大部分的用户体验。
我的问题是，我应该使用哪种模式来处理前后端数据同步？
A) Go through vuex: 将活动列表（那些正在显示、编辑或创建的）存储在 vuex store 中。 ListComponent 将更改 store 和 然后 ，对列表所做的更改将通过 API.[=15 发送到后端=]
B) 直接转到服务器：每次显示、编辑或创建列表时，直接从 ListComponent 读取和写入服务器。
如果按照A，店铺应该是什么架构？我应该如何以及何时启动同步？我如何跟踪已更改和未更改的内容？
两者都可能正确，具体取决于您的用例。我目前正在构建的应用程序同时使用了两者。
什么时候用B：直接去服务器
如果数据非常重要，需要保存，请使用 B。在这种情况下，您可能希望直接转到服务器并提供响应以验证它是否已提交给数据库。我们将此过程用于管理类型更改。请注意，您还可以在服务器响应后更新 Vuex，并仍然使用 Vuex 来提供您的数据。
什么时候用A：Go Through Vuex
如果您需要更快的体验，请使用 A，因为无需等待服务器。在实际保存之前，您必须乐观地显示更改。另一个好处是您可以同步 Vuex to localStorage。我们将其用于用于自定义视图的用户首选项。只是为了等待获取这些页面而放慢页面速度是一种糟糕的体验。
如何使用A：通过Vuex
有几种方法可以做到这一点。这是一种模式：
- 从组件调度 Vuex 操作 1
- 从更新状态的 Action 提交 Vuex 突变 - 这是一个乐观的更新，因为您假设它会通过
- 从 Action 1 调度另一个 Vuex Action 2 - 这假设您将在多个 Action 中重复使用此 Action，否则它可以全部进入 Action 1
- 动作 2 向服务器发送数据
- 根据承诺 return，Action 2 提交突变以更新 Vuex 状态
- 突变需要处理任何差异（或错误）
算一下Vuex的成本
如您的评论所示，如果您完全需要使用 Vuex，最好计算一下成本，因为它确实会增加很多开销和复杂性。理想的做法是以包含与一种数据类型（例如 'Lists'）的所有交互的方式编写您的组件，这样您就不必通过 Vuex 共享状态。
想象一下这个简单的例子。您有一个 Vue JS 应用程序，用户可以在其中创建任务列表并对其进行排序。这些列表应该由服务器存储在数据库中。假设我们有一个 ListComponent 来完成大部分的用户体验。
我的问题是，我应该使用哪种模式来处理前后端数据同步？
A) Go through vuex: 将活动列表（那些正在显示、编辑或创建的）存储在 vuex store 中。 ListComponent 将更改 store 和 然后 ，对列表所做的更改将通过 API.[=15 发送到后端=]
B) 直接转到服务器：每次显示、编辑或创建列表时，直接从 ListComponent 读取和写入服务器。
如果按照A，店铺应该是什么架构？我应该如何以及何时启动同步？我如何跟踪已更改和未更改的内容？
两者都可能正确，具体取决于您的用例。我目前正在构建的应用程序同时使用了两者。
什么时候用B：直接去服务器 如果数据非常重要，需要保存，请使用 B。在这种情况下，您可能希望直接转到服务器并提供响应以验证它是否已提交给数据库。我们将此过程用于管理类型更改。请注意，您还可以在服务器响应后更新 Vuex，并仍然使用 Vuex 来提供您的数据。
什么时候用A：Go Through Vuex 如果您需要更快的体验，请使用 A，因为无需等待服务器。在实际保存之前，您必须乐观地显示更改。另一个好处是您可以同步 Vuex to localStorage。我们将其用于用于自定义视图的用户首选项。只是为了等待获取这些页面而放慢页面速度是一种糟糕的体验。
如何使用A：通过Vuex 有几种方法可以做到这一点。这是一种模式：
- 从组件调度 Vuex 操作 1
- 从更新状态的 Action 提交 Vuex 突变 - 这是一个乐观的更新，因为您假设它会通过
- 从 Action 1 调度另一个 Vuex Action 2 - 这假设您将在多个 Action 中重复使用此 Action，否则它可以全部进入 Action 1
- 动作 2 向服务器发送数据
- 根据承诺 return，Action 2 提交突变以更新 Vuex 状态
- 突变需要处理任何差异（或错误）
算一下Vuex的成本
如您的评论所示，如果您完全需要使用 Vuex，最好计算一下成本，因为它确实会增加很多开销和复杂性。理想的做法是以包含与一种数据类型（例如 'Lists'）的所有交互的方式编写您的组件，这样您就不必通过 Vuex 共享状态。