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

Question

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

Answer 1

有许多 Web API 可用于在用户浏览器中保留某些状态：

还a package专门为此做了

Answer 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')))
    );
...
}

快速浏览一下如何存储在本地存储中。您必须考虑如何 reset/invalidate 本地存储中的数据。您还必须决定要存储什么。如果你应该有某种时间戳等等。

有一些 vuex 插件可以为您做一些这样的事情。看看 https://github.com/vuejs/awesome-vue 看看你是否找到了什么。

Answer 3

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

使用 vuex-persist，您不必记住键，或 get/set 来自 localStorage 的值。

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

Vuex: persisting state on page refresh without writing itvuex?

vue.js

vuex

vuejs2