Vuejs 隐藏/显示元素在路由更改时刷新

Question

我一直在开发一个 Vue 项目，今天引起了我的注意。我在整个项目中使用了带有一些样式的复选框（我将它们用作切换开关），并且由于这些元素，我显示或隐藏了一些元素和组件。切换元素控制每个组件中的特定数据。当数据为真时，一些元素会显示在页面上，当数据为假时，它们会被隐藏。我今天注意到的有点有趣。可能有一个简单的解决方案，但是虽然我已经在网上搜索了一段时间，但我还没有找到解决方案。

事情是这样的；

假设我在项目的“关于”页面。我使用了我的拨动开关，现在我的一些元素和一些子组件显示在About.vue 中。然后我去访问我的Services.vue 页面并显示和隐藏一些元素和子组件。顺便说一句，几乎所有这些页面都有表单，我将这些表单保存到本地存储中。当我从“服务”页面返回“我的关于”页面时，我看到我激活的元素已恢复。换句话说，每个组件在从另一个组件返回时都以其默认状态欢迎我。我想看到的是，如果我去检查一些复选框以显示某些元素，无论我在其他路线之间漫游多长时间，我都希望这些元素在我回来时保持可见或隐藏。例如，必须激活切换元素才能在组件上写入用户名和密码。激活切换元素后，用户输入用户名和密码并单击“保存”按钮。然后他继续浏览该项目的许多区域，当他返回时，他看到切换元素处于非活动状态，并且未输入用户名和密码。我不希望它是那样的。我该如何解决这个问题？

Answer 1

你可以使用 vuex 来解决这个问题。 https://vuex.vuejs.org/

Vuex 是 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式发生变化。它还与 Vue 的官方 devtools 扩展 (opens new window) 集成，提供高级功能，例如零配置时间旅行调试和状态快照导出/导入。