导航回页面时 Vue 反应失败

Question

我使用一个名为binary_state的简单二进制Vue变量来控制一个元素的 class，在本题的 rest 中名为“controlled_element”。 “controlled_element”有两个类“class_true”和“class_fasle”，由binary_state的值决定。 binary_state本身的值使用页面上的按钮在 true 和 false 之间切换。 我们称该按钮为“controlling_element”。

每次使用“controlling_element”更改binary_state的值时，更新后的值都会发送到服务器。 另一方面，每次刷新页面时，都会从服务器检索binary_state的更新值。 一旦发生这种情况，“controlled_element”的 class 也会进行调整。

这是一个非常简单的场景。 现在考虑以下步骤：

1. 刷新页面，以便从服务器检索binary_state的新值。 为简单起见，我们假设新值是true ，即binary_state=true 。 这会将“controlled_element”的 class 设置为“class_true”。
2. 按奇数次“controlling_element”。 这会将“controlled_element”的binary_state和 class 分别设置为“false”和“class_false”。
3. 离开页面并使用浏览器的后退箭头（按钮）返回页面。
4. 我希望binary_state的值继续为false 。 正如在 Vue devtool 插件上看到的那样，情况似乎确实如此。
5. 我还希望“controlled_element”的 class 继续为“class_false”。 然而，令我惊讶的是，class 是“class_true”，这是从服务器收到的最新值，与步骤 2 中应用的所有更改无关。

请注意，当导航回页面时， binary_state和“controlled_element”的 class 之间的同步（反应性）被违反：如上面第 4 步所述， binary_state的值继续为 false（如 Vue devtool 插件所示） ，但“controlled_element”的 class 是“class_true”。

笔记。 我在 chrome（版本 108.0.5359.125（官方构建）（64 位））和 Edge（108.0.1462.76（官方构建）（64 位））中看到了这个问题，但是Firefox （108.01.1（ 64 位））。

最后三点。

• 我看过这个相关问题。 作者表示他们能够通过设置表单的autocomplete="on"来解决问题。 我不确定这对我是否有帮助，因为我一开始就没有表格。
• 我看到了一些关于使用vuex或localStorage的建议，但我不确定这对我的情况是否有必要，因为如步骤 4 中所述，Vue 值binary_state似乎具有正确的值。
• 如果与此主题有关，我不会使用vue-router 。

Answer 1

好吧，老实说，我有一些建议，具体取决于您使用的 vue 版本。 比如你用的是Vue2或者Vue3的cli，你的state管理问题可以用Vuex解决（不过此时vuex已经不是官方推荐的state管理系统了）。 如果您使用的是Vue3 ，最好的解决方案是使用Pinia go https://pinia.vuejs.org ，与Vuex相比，它非常有用、现代，而且非常容易学习和使用。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage localStorage是另一种解决方案，但代价是您必须编写代码来删除该localStorage 。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage sessionStorage类似于localStorage ，但会在window 关闭后自动清除数据。

Answer 2

当用户使用浏览器后退/前进按钮访问页面时，我通过手动重新加载页面解决了这个问题。 下面的代码片段是这样做的：

 <script> if (performance) { // get the PerformanceNavigationTiming object const perfEntries = performance.getEntriesByType("navigation"); const perfNavTiming = perfEntries && perfEntries[0]; if (perfNavTiming) { // get the type of navigation const navType = perfNavTiming.type; // reload if it is back_forward or prerender. if ((navType === "back_forward") || (navType === "prerender")) { window.location.reload(); } } } </script>

这不是最好的解决方案，但考虑到我的时间限制，我想我应该为它 go。 我想在我可以使用建议的解决方案之前需要学习一些知识，这些解决方案使用localStorage 、 sessionStorage和Piani ，因为我不确定如何使用这些技术来重新启动 Vue 双向绑定。