Vuex：在不编写 itvuex 的情况下在页面刷新时保持状态？

Posted 2023-02-22

【中文标题】Vuex：在不编写 itvuex 的情况下在页面刷新时保持状态？

【英文标题】：Vuex: persisting state on page refresh without writing itvuex?

【发布时间】：2021-11-14 05:40:27

【问题描述】：

我正在尝试制作一个没有后端的应用程序，并且我正在使用 Vue 和 Vuex 在我的应用程序商店中设置一些状态。有没有办法在设置和执行浏览器刷新后保持此状态而不调用服务器...或者它是否总是在页面刷新后默认恢复为默认初始状态值？

【参考方案1】：

您可以使用许多 Web API 在用户的浏览器中保留某些状态：

Local storage Indexed database cookies

还有a package专门为此做的

【参考方案2】：

如其他答案所述，有几种方法可以保持状态。

探索本地存储和 Vuex 有一些方法可以实现这一点。

存储在本地存储中的所有内容都是以键值对形式存储的字符串。要将其存储在您编写的本地存储中

// Store value "value" with key "key"
localStorage.setItem('key', 'value');

// Load data from local storage store as a variable
let val = localStorage.getItem('key');

如果要存储一个对象，请将其转换为 JSON 字符串

// Convert object to an JSON string and store it with key "key"
localStorage.setItem('key', JSON.stringify(object));

// Retrieve data and convert JSON string to object
let obj = JSON.parse(localStorage.getItem('key'));

您可以在 Vuex 中使用它，存储某些值或整个存储区。

例如在 vuex 函数中，您可以检查本地存储是否有值，如果没有则从 api 检索：

...
if (localStorage.getItem('key')) 
    // Use data from local storage
 else 
    // Get it from an api/other source

...

如果您想将整个商店存储在本地存储中（不是说您应该这样做）并且您希望确保始终拥有最新的保存，您可以在 Vuex 中创建一个订阅，该订阅会在每次商店更新时触发。

// Create a subscription that stores updates on every mutation
store.subscribe((mutation, state) => 
    // Store the store object as a JSON string
    localStorage.setItem('store', JSON.stringify(state));
);

创建 Vue 应用程序后，您可以调用一个操作来检查本地存储，如果存储存在，则加载它

if (localStorage.getItem('store')) 
    // Replace the store state object with the stored object
    this.replaceState(
        Object.assign(state, JSON.parse(localStorage.getItem('store')))
    );
...

这是关于如何在本地存储中存储的快速浏览。您必须考虑如何重置/使本地存储中的数据无效。您还必须决定要存储什么。如果你应该有某种时间戳等等。

有一些 vuex 插件可以为您完成其中的一些工作。看看https://github.com/vuejs/awesome-vue，看看有没有发现。

【讨论】：

感谢您详细解答我的问题！请注意，由于 JSON 的限制，函数和循环引用不能保存在本地存储中。您可以在索引数据库中执行此操作，尽管这些更难使用。

【参考方案3】：

正如 Nino 所建议的，vuex-persist 可以完美地为您完成这项工作。它允许选择你想持久化的 vuex 模块，这样你就可以跳过你不想持久化的模块，比如一些输入值绑定到状态。

使用 vuex-persist，您不必记住键，或从 localStorage 获取/设置值。