Vuex：刷新浏览器时保留部分状态

Posted 2023-02-22

【中文标题】Vuex：刷新浏览器时保留部分状态

【英文标题】：Vuex: Preserve parts of the state when refreshing the browser

【发布时间】：2018-04-25 12:25:09

【问题描述】：

我将 Vue 与 Vuex 一起使用。我遇到了以下问题：当用户按下浏览器的“刷新按钮”时，Vuex 存储中的状态会重置为其初始值。但是，我想保留状态。更准确地说，我只想保留部分状态，而不是全部。

现在我知道有一个名为“vuex-persistedstate”的插件。就是这个：

https://www.npmjs.com/package/vuex-persistedstate

还有一个选项可以只保留部分状态，但我不知道如何准确地做到这一点。例如，如果我们看一下 jsfiddle

https://jsfiddle.net/robinvdvleuten/wmf8zvf8/

有一个变量叫做“count”。假设我们在状态中有另一个变量“newCount”，我只想保留 newCount，而不是 count。我要详细写什么而不是plugins: [createPersistedState()]？

非常感谢您的帮助！

【参考方案1】：

您无法在浏览器刷新后保留状态的任何部分。 为什么？因为它只是 javascript，所以所有发生的事情都会在刷新后重置。

如果要创建持久数据，则必须将其存储在某个地方。几种解决方案：

使用远程数据库 创建服务器会话 存储在浏览器本地存储中（vuex-persistedstate默认解决方案） 存储在 cookie 中

小心浏览器存储，一些用户禁用它，你必须管理隐私和安全政策。