导航回页面时 Vue 反应失败

Question

我使用一个名为 binary_state 的简单二进制

Vue

变量来控制元素的类，在本问题的其余部分中名为“controlled_element”。 “受控元素”有两个类“class_true”和“class_fasle”，由

binary_state

的值确定。

binary_state

的值本身可以使用页面上的按钮在 true 和 false 之间切换。我们将该按钮称为“controlling_element”。

每次使用“controlling_element”更改

binary_state

的值时，更新的值都会发送到服务器。另一方面，每次刷新页面时，都会从服务器检索

binary_state

的更新值。一旦发生这种情况，“受控元素”的类也会调整。

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

1. 刷新页面，以便从服务器检索新的

   binary_state

   值。为了简单起见，我们假设新鲜值为

   true

   ，即

   binary_state=true

   。这会将“controlled_element”的类设置为“class_true”。
2. 按“controlling_element”奇数次。这会将

   binary_state

   和“controld_element”的类分别设置为“false”和“class_false”。
3. 离开页面并使用浏览器的后退箭头（按钮）返回页面。
4. 我预计

   binary_state

   的价值将继续是

   false

   。正如在 Vue devtool 插件上看到的那样，似乎实际上是这样。
5. 我还希望“受控元素”的类别继续为“class_false”。然而，令我惊讶的是，该类是“class_true”，这是从服务器收到的最新值，无论步骤 2 中应用的所有更改如何。

请注意，当导航回页面时，

binary_state

和“受控元素”类之间的同步（反应性）被违反：如上面步骤 4 中所述，

binary_state

的值仍然为 false（如Vue devtool 插件），但“controlled_element”的类是“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 版本。例如，如果您在 cli 中使用

Vue2

或

Vue3

，则可以使用

Vuex

解决您的状态管理问题（但是此时

vuex

不再是官方推荐的状态管理系统）。如果您使用

Vue3

，最好的解决方案是使用

Pinia

https://pinia.vuejs.org，与

Vuex 相比，它非常有用、现代，而且更容易学习和使用

.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage

是另一种解决方案，但代价是您必须编写代码来删除该

localStorage

。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

sessionStorage

与

localStorage

类似，但窗口关闭后会自动删除数据。

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>

这不是最好的解决方案，但考虑到我的时间限制，我想我应该这样做。我想在使用

localStorage

、

sessionStorage

和

Piani

使用建议的解决方案之前需要进行一些学习，因为我不确定如何使用这些技术来重新启动 Vue 双向绑定。

Answer 3

该行为与 bfcache 有关（下面是对其含义的更详细解释）。 在此链接中，您可以阅读有关它的更多信息并选择合适的解决方案：https://web.dev/articles/bfcache

bfcache（后退缓存）是一项浏览器优化功能，允许用户在页面之间来回导航时立即加载网站。浏览器不会完全重新加载页面，而是将页面的快照存储在内存中，从而使后续访问速度更快。这可以提高性能，特别是对于经常在页面之间移动的用户，但可能需要开发人员确保其 Web 应用程序与 bfcache 兼容，因为使用此功能时某些事件和脚本的行为可能会有所不同。