Vuex 和 Vue-router：同时改变页面和状态

Question

我正在使用 Vuex 和 Vue-router 开发一个单页应用程序。

我目前有一个由一个大对象组成的商店——比如 X——从一个带有标识符的数据库中加载。 我使用 Vue-router 在 SPA 的页面之间导航。

有时，用户可能希望从数据库中加载另一个版本的 X。这样做时，我还想将用户导航到“起始页”。 “起始页”和用户当前所在的页面都将显示通过计算属性从商店获取的大量信息。

据我所知，有两种方法可以解决这个问题，但没有一种是好的：

1. 我将新对象加载到存储中，然后推送路由器。
   • 问题：当我从后端将对象加载到存储中时，所有的反应都开始发生，用户所在的当前页面将读取新信息并表现得很奇怪。
2. 我先推送路由器再更新。
   • 问题：这与上述情况正好相反。开始页面现在将包含旧版本 X 的所有信息，并且仅在一段时间后更新到新版本。

对于 1 和 2，我最终会在前端/控制台中出现大量错误，例如唯一性验证。

一种解决方案可能是首先将用户导航到“加载页面”，然后加载新对象，然后推送路由器。

对我来说，这似乎是一个非常基本的 Vue 问题，我可能缺少一些最佳实践。

Answer 1

选项 #2 是首选方式（恕我直言）

处理方法是防止显示旧数据（有条件地使路由成为加载页面）。这可以通过将存储的密钥与路由密钥进行比较来轻松实现。如果您使用的是vuex-router-sync，则可以从 vuex getter 获得此信息。

我看到选项 #1 的问题是响应不是立即的，您仍然需要显示数据正在加载，然后在推送新路由之前阻止任何其他操作。从 UX 的角度来看，这不是一种常见的体验（考虑单击一个链接，您不会期望重定向会在 5 秒后进行，然后呈现一个完全加载的页面）。此外，您仍然需要在加载时禁用 UI，或者最好能够中断加载过程，以防止在数据加载时用户执行另一个路由时执行该路由.