LocalStorage 配合 Vuex 或 Pinia 实现数据持久化，核心是建立“状态变更 → 自动写入 localStorage”和“页面加载 → 自动从 localStorage 恢复”的双向同步通道；推荐 Pinia 使用 pinia-plugin-persistedstate 插件，Vuex 使用 vuex-persistedstate，轻量场景可用 @vueuse/core 的 useLocalStorage。
LocalStorage 配合 Vuex 或 Pinia 实现数据持久化，核心是建立“状态变更 → 自动写入 localStorage”和“页面加载 → 自动从 localStorage 恢复”的双向同步通道。不是手动存取，而是让持久化逻辑融入响应式生命周期中，避免重复代码、类型断言错误和状态不一致问题。
Pinia：推荐用 pinia-plugin-persistedstate 插件
这是目前最主流、最稳定的方式，开箱即用，支持精细控制：
- 安装插件：
npm install pinia-plugin-persistedstate - 在
main.ts中注册：pinia.use(piniaPluginPersistedState) - 在 Store 定义中启用持久化：
persist: true（整 store 同步）
或更安全的写法：persist: { paths: ['token', 'userInfo', 'theme'] }（只存关键字段） - 默认存储 key 是
pinia/模块名（如pinia/user），可在 persist 配置中用key自定义 - 支持切换存储介质：
storage: sessionStorage适合表单草稿等会话级数据
Vuex：用 createPersistedState 插件或手动监听
Vuex 4（兼容 Vue 3）常用 vuex-persistedstate 插件，原理类似但配置粒度略粗：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 安装：
npm install vuex-persistedstate - 在 store 创建时传入插件：
plugins: [createPersistedState({ key: 'my-app' })] - 默认存整个 state，如需过滤字段，可用
reducer函数返回精简对象：reducer: (state) => ({ token: state.token, theme: state.theme }) - 注意：Vuex 的 mutation 必须是同步的，插件会在每次 commit 后触发写入，因此不能在异步 action 中直接改 state 并期望立刻落盘
轻量场景：直接用 useLocalStorage 组合式函数
如果只是个别字段需要持久化（比如主题色、语言偏好），不必引入整套插件：
立即学习“Java免费学习笔记（深入）”；
- 安装
@vueuse/core：npm install @vueuse/core - 在组件或 Store 中直接使用：
const theme = useLocalStorage('app-theme', 'light')
此时theme.value就是响应式 + 自动同步的变量，赋值即写入，刷新即恢复 - 优势是零配置、类型安全、无副作用，适合简单状态或快速原型
验证与排错要点
持久化是否生效，不能只看代码有没有写，要动手验证：
- 打开浏览器 DevTools → Application → LocalStorage，搜索对应 key（如
pinia/user或my-app），确认值存在且是合法 JSON - 修改状态后刷新页面，立即检查 Store 字段是否还原（如
userStore.token是否非空） - 常见失败原因：
– 存了不可序列化值（Date、RegExp、函数、Map/Set）→ JSON.stringify 后丢失
– SSR 环境下未判断typeof window !== 'undefined'→ 插件跳过执行
– 多标签页同时操作 → localStorage 不广播变更，需额外监听storage事件并调用$patch
