如何在Vue.JS应用程序中使用模拟

我正在使用Vue.JS frontend开发一个应用程序，其中一个用户登录并发送给其他用户列表。此外，在该页面上，还有一个用于医院列表的选项卡（单击后，它将带您进入一个包含医院列表的新页面）

登录用户在用户页面上可以执行的方法之一是选择一个要模拟的用户。一旦他们确认要模拟此用户，用户页面将刷新以显示模拟用户有权查看的用户列表的网格。在模拟时，他们还应该能够在选项卡（用户到医院）之间切换，继续模拟，因此现在医院列表将呈现模拟用户有权查看的医院列表。为了确认正在模拟用户，页面上应该有一个文本框，显示“{user}现在已模拟”

我能够完成第1部分，在用户页面上模拟用户，但一旦我单击医院，存储为“isUserImpersonated”的数据就会刷新（一旦创建了模拟，isUserImpersonated将从false切换到true。当我刷新页面时，isUserImpersonated将切换回false）。如何使每个页面的数据保持不变，而不是在呈现新路径后进行刷新（localhost:8080/users->localhost:8080/hospitals）

在查看文档之后，我尝试使用EventBus，这似乎是可行的，但一旦呈现新页面，数据就不会保持不变

---

有人在Vue.JS项目中使用过模拟吗？关于如何确保用户在页面之间切换时“isUserImpersonated”保持不变，您有什么建议或想法吗？

首先，这不起作用的原因是您所做的更改存储在内存中，当您导航到新页面时，内存会被删除

为了实现这一点，您需要使用某种持久性存储。您有两种选择：

使用cookie存储并加载模拟用户数据

使用

检查页面加载时是否模拟用户：

mounted() {
  this.impersonation = this.$cookie.get('impersonation');
}

将模拟用户数据存储在服务器上

此实现完全依赖于您的服务器堆栈。大多数框架都提供了您可以利用的会话或缓存

---

首先，这不起作用的原因是您所做的更改存储在内存中，当您导航到新页面时，内存会被擦除

为了实现这一点，您需要使用某种持久性存储。您有两种选择：

使用cookie存储并加载模拟用户数据

使用

检查页面加载时是否模拟用户：

mounted() {
  this.impersonation = this.$cookie.get('impersonation');
}

将模拟用户数据存储在服务器上

此实现完全依赖于您的服务器堆栈。大多数框架都提供了您可以利用的会话或缓存

使用Vuex进行状态管理 我在上面对文斯的答案做了一些扩展。 首先，是的，我在Vue应用程序中成功地使用了模拟。随着应用程序的扩展，这可能是因为您正在医院工作（不确定这是用于学校项目还是真实世界的东西），您将从多个位置访问和更改状态。Vuex使您能够从视图中分离状态，并允许通过操作进行更改。我强烈建议您至少查看一下

使用Vuex进行状态管理 我在上面对文斯的答案做了一些扩展。 首先，是的，我在Vue应用程序中成功地使用了模拟。随着应用程序的扩展，这可能是因为您正在医院工作（不确定这是用于学校项目还是真实世界的东西），您将从多个位置访问和更改状态。Vuex使您能够从视图中分离状态，并允许通过操作进行更改。我强烈建议您至少查看一下

---

谢谢，这非常有帮助。在这个过程中，在我模拟用户的方法中，我调用了一个API，其响应包括“模拟的_as”，这将成为模拟用户的电子邮件。我可以以某种方式使用此存储的信息吗？是的，听起来这就是您希望存储的信息。请参见我的回答中我说的

{…存储您需要的任何数据}

。您可以在此处替换从服务器收到的电子邮件地址。谢谢您，这非常有帮助。在这个过程中，在我模拟用户的方法中，我调用了一个API，其响应包括“模拟的\u as”，这将成为模拟用户的电子邮件。我可以以某种方式使用此存储的信息吗？是的，听起来这就是您希望存储的信息。请参见我的回答中所说的

{…存储您需要的任何数据}

。您可以在此处替换从服务器收到的电子邮件地址。