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

Question

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

我目前有一家商店，该商店由一个大型对象（例如X）组成，该对象是从具有标识符的数据库中加载的。 我使用Vue路由器在SPA的页面之间导航。

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

如我所见，有两种方法可以解决此问题，但没有一种是好方法：

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

对于1和2我最终都会在前端/控制台中遇到一些错误，例如唯一性验证。

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

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

Answer 1

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

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

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