Vue.js Vuex和Vue路由器：同时更改页面和状态

我正在使用Vuex和Vue路由器开发一个单页应用程序

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

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

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

我将新对象加载到存储中，然后按下路由器。

• 问题：当我从后端将对象加载到存储中时，所有的反应性都开始发生，用户所在的当前页面将读取新信息并做出奇怪的行为

我先推路由器，然后更新。

• 问题：这与上述相反。起始页现在将包含旧版本X的所有信息，并且仅在更新到新版本一段时间之后

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

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

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

选项2是首选方式（IMHO）

处理它的方法是防止显示旧数据（使路由有条件地成为加载页）。这可以通过比较存储的密钥和路由密钥来轻松实现。如果您使用的是

vuex路由器同步

，则可以从vuex getter获得此信息

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