持久化插件需精准控制保存字段：用paths指定白名单路径，用reducer函数过滤敏感或不可序列化数据，分仓存储不同字段至localStorage/sessionStorage/indexedDB，并预处理Date、Map/Set等类型以避免序列化失败。
持久化插件（如 Vuex PersistedState、Redux Persist 或 Pinia 的 persist 插件）默认会把整个状态树存进 localStorage 或 sessionStorage。但实际开发中，你往往只想保存部分字段，比如用户登录态、主题偏好，而要排除敏感信息（如 token 临时凭证、临时表单草稿、大型缓存数据）或不可序列化的值（如函数、Date 对象、Map/Set）。关键不是“能不能排除”，而是“怎么精准控制”。
用 paths 明确指定要保留的字段
多数主流持久化插件支持 paths 配置项，它是一个字符串数组，只保存路径匹配的 state 字段。没列出来的，自动被忽略。
- Vuex PersistedState 示例：
paths: ['user.id', 'user.name', 'settings.theme', 'cart.items']
})
这样即使 user.token 或 user.lastLoginTime 存在，也不会写入本地存储。
- 注意：路径支持嵌套点号语法，不支持通配符；数组索引如
list.0.name可用，但动态索引（如list.*.id）需额外处理。
用 filter 或 reducer 函数做细粒度过滤
当规则复杂（比如“排除所有以 temp_ 开头的字段”或“跳过值为 null/undefined 的项”），推荐用函数式过滤。
- Pinia Persist 插件中使用
serializer+ 自定义reducer：
key: 'my-app',
paths: ['user', 'settings'],
reducer: (state) => {
const filtered = { ...state };
delete filtered.user.tempSessionId;
delete filtered.user.rawToken;
return filtered;
}
}
- Redux Persist 的
transforms也可配合自定义 transform 实现运行时脱敏（如 token 替换为占位符）。
为不同字段配置独立存储路径与策略
敏感字段和普通字段混存同一 storage key 容易引发泄漏风险。更安全的做法是分仓存储——给不同模块/字段指定专属 storage key 和存储介质。
- 例如：用户身份信息存 indexedDB（容量大+可加密），主题设置存 localStorage（轻量+快速读取），临时搜索历史存 sessionStorage（关闭即清空）。
- Vuex PersistedState 支持多实例：
key: 'auth-state',
storage: window.indexedDB ? indexedDBStorage : localStorage,
paths: ['user.id', 'user.role']
});
const uiPersist = createPersistedState({
key: 'ui-state',
storage: localStorage,
paths: ['settings.theme', 'layout.sidebarCollapsed']
});
避免序列化失败：提前清理不可存字段
localStorage 只接受字符串。若 state 中含函数、正则、undefined、Symbol、循环引用对象，JSON.stringify 会静默丢弃或报错。持久化前务必预处理。
- 通用清洗建议：
- 删掉所有值为
undefined或function的属性（可用 Lodash 的omitBy） - 将
Date转为 ISO 字符串：state.timestamp = new Date().toISOString() - 对 Map/Set 转为普通对象/数组再存
- 在插件的
beforeRestore/afterRehydrate钩子中还原特殊类型（如把字符串时间转回 Date）
不复杂但容易忽略——排除字段不是靠“删代码”，而是靠声明式路径控制 + 函数式清洗 + 分层存储设计。真正安全的持久化，从明确“什么不该存”开始。
