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 实例、序列化方式和路径白名单。
