vuex 持久化依赖插件（如 vuex-persistedstate），底层调用 localstorage/sessionstorage 或自定义 storage，通过 key、paths 控制存储键名与字段，json 序列化限制数据类型，reducer 可过滤敏感信息或动态控制持久化逻辑。

Vue 项目中使用 Vuex 持久化（如 vuex-persistedstate）时，WebStorage 的底层配置本质是通过 localStorage 或 sessionStorage API 实现数据的序列化存储与恢复，并非 Vuex 自带功能，而是插件在初始化和状态变更时主动调用浏览器原生存储接口。

storage 参数决定实际使用的 WebStorage 实例

插件通过 storage 选项指定底层存储对象，默认为 window.localStorage。你可以显式传入：

• storage: localStorage —— 持久保存，关闭标签页也不丢失
• storage: sessionStorage —— 仅当前会话有效，页面刷新保留，关闭标签页即清空
• storage: customStore —— 自定义对象，需实现 getItem、setItem、removeItem 方法（例如封装加密逻辑或 fallback 到 IndexedDB）

key 和 paths 控制存储粒度与命名空间

key 是写入 WebStorage 时使用的键名，默认为 'vuex'；paths 指定哪些 state 字段需要持久化（支持点号路径，如 ['user.token', 'cart.items']）。未列入 paths 的字段不会被序列化保存，即使在 storage 中存在旧值也不会自动还原。

序列化依赖 JSON.stringify / JSON.parse，不支持函数、Symbol、undefined 等类型

插件默认使用 JSON.stringify 将 state 转为字符串存入 storage，还原时用 JSON.parse。这意味着：

• 不可存储函数、正则、Date 对象、Map/Set、BigInt、undefined 等非 JSON 安全值
• 若 state 含 Date，需提前转为 ISO 字符串；含 Map 可先转为数组再存
• 可通过 serialize 和 deserialize 选项自定义编解码逻辑（例如使用 flatted 支持循环引用）

reducer 函数可过滤敏感字段或动态控制是否保存

reducer 是一个接收完整 state 并返回待持久化对象的函数。常用于：

• 剔除 token、密码等敏感字段：return { user: state.user, settings: state.settings }
• 根据环境跳过持久化：return process.env.NODE_ENV === 'development' ? state : {}
• 条件性保存：return state.app.ready ? state : {}

不复杂但容易忽略：WebStorage 是同源限制的纯字符串键值对，Vuex 持久化只是在其之上加了一层状态映射逻辑，真正生效与否取决于你是否正确配置了 storage 实例、序列化方式和路径白名单。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！