🎉 Vue.js 状态持久化教程

📌 什么是状态持久化？
状态持久化是指在页面刷新或应用重启后，仍能保留用户交互产生的数据状态。在 Vue.js 中，我们可以通过以下方式实现：

1. 使用 localStorage

localStorage 是浏览器提供的持久化存储方案，适合保存非敏感数据。
✅ 示例代码：

// 保存状态
localStorage.setItem('userRole', 'admin');

// 读取状态
const role = localStorage.getItem('userRole');

⚙️ 注意：数据以字符串形式存储，需自行处理序列化与反序列化

Vuejs_State_Persistence

2. 使用 Vuex + localStorage 同步

通过 Vuex 的 persistedState 插件可自动同步状态到 localStorage
📦 安装插件：

npm install vuex-persistedstate

📌 配置示例：

import persistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: { ... },
  plugins: [persistedState({ storage: localStorage })]
});
Vuex_PersistedState

3. 使用 sessionStorage

与 localStorage 类似，但数据仅在当前会话中有效
⚠️ 适用场景：临时状态存储（如表单数据）

SessionStorage

4. 使用 IndexedDB

适合存储结构化数据，支持更复杂的查询操作
💾 示例 API：

const request = indexedDB.open('myDB', 1);
request.onsuccess = function(event) { ... };
IndexedDB

🔗 想了解更多？可访问 Vue.js 官方文档 深入学习状态管理最佳实践