与服务器同步 vuex 状态的推荐策略 [英] Recommended strategy to sync vuex state with server
问题描述
想象一下这个简单的案例.您有一个 Vue JS 应用程序，用户可以在其中创建任务列表并对其进行排序.这些列表应该由服务器存储在数据库中.假设我们有一个 ListComponent 来完成大部分 UX.
Imagine this simple case. You have a Vue JS application in which users can create lists of tasks and sort them. These lists should be stored in a database by the server. Let's assume we have a ListComponent which does the bulk of the UX.
我的问题是，我应该使用哪种模式来处理前端和后端数据同步?
My question is, which pattern should I use to handle front-end and back-end data synchronisation?
A) 通过 vuex:将活动列表(正在显示、编辑或创建的列表)存储在 vuex store 中.ListComponent 将更改 store 和 然后，对列表所做的更改将通过 API 发送到后端.
A) Go through vuex: Store the active lists (those being shown, edited or created) in the vuex store. The ListComponent will change the store and then, the changes made to a list will be sent to the backend through an API.
B) 直接到服务器:每次显示、编辑或创建列表时，直接从 ListComponent 读取和写入服务器.
B) Go directly to the server: Read and write directly from the ListComponent to the server every time a list is shown, edited or created.
如果按照A，商店应该有什么架构?我应该如何以及何时启动同步?我如何跟踪哪些已更改，哪些未更改?
If following A, what architecture should the store have? How and when should I kick a synchronisation? How can I keep track of what has changed and what has not?
推荐答案
根据您的用例，两者都可以是正确的.我目前正在构建的应用程序同时使用两者.
Both can be correct depending on your use case. The application I'm currently building uses both.
何时使用 B:直接进入服务器如果要保存的数据非常重要，请使用 B.在这种情况下，您可能希望直接转到服务器并提供响应以验证它是否已提交给数据库.我们使用此流程来更改管理员类型.请注意，您还可以在服务器响应之后更新 Vuex，并且仍然使用 Vuex 来提供您的数据.
When to use B: Go Directly to the server Use B if the data is very important to save. In this case you may want to go directly to the server and serve up the response to verify it was committed to the DB. We use this process for Admin type changes. Note that you can also update Vuex after the server response and still use Vuex to serve up your data.
何时使用 A:通过 Vuex如果您需要更快的体验，请使用 A，因为无需等待服务器.在实际保存之前，您必须乐观地显示更改.另一个好处是您可以将 Vuex 同步到 localStorage.我们将此用于用于自定义视图的用户首选项.放慢页面速度只是为了等待获取它们是一种糟糕的体验.
When to use A: Go Through Vuex Use A if you require faster experience, since there's no waiting for the server. You must be okay with optimistically displaying changes before actually saving. The other benefit is you can sync Vuex to localStorage. We use this for user preferences that are used to customize views. Its a poor experience to slow down the page just to wait on fetching those.
如何使用A:通过Vuex有几种方法可以做到这一点.这是一种模式:
How to use A: Go through Vuex There's a couple ways to do this. Here's one pattern:
- 从组件调度 Vuex Action 1
- 从更新状态的 Action 提交 Vuex Mutation - 这是一个乐观的更新，因为您假设它会通过
- 从动作 1 中调度另一个 Vuex 动作 2 - 这假设您将在多个动作中重用此动作，否则它可以全部进入动作 1
- Action 2 向服务器发送数据
- 承诺返回后，Action 2 提交变更以更新 Vuex 状态
- Mutation 需要处理任何差异(或错误)
计算Vuex的成本
就像您的评论所示，如果您需要使用 Vuex，最好计算成本，因为它确实增加了很多开销和复杂性.理想的情况是以这样一种方式编写您的组件，即包含与一种类型的数据(例如列表")的所有交互，这样您就不必通过 Vuex 共享状态.
Like your comment shows, its good to count the cost if you need to use Vuex at all because it does add a lot of overhead and complexity. The ideal is to write your components in such a way as to contain all interactions with one type of data (such as 'Lists') so you do not have to share state through Vuex.
这篇关于与服务器同步 vuex 状态的推荐策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
