应按需持久化搜索关键字并响应式同步：将 searchKeyword 设为顶层字段，用 persist.paths 精准控制；配合 getter 实现缓存过滤逻辑；注意初始化恢复、异步请求监听及防抖处理，避免嵌套路径与不可序列化值。
搜索过滤关键字这类状态，通常需要在页面刷新后保留，但又不能无差别持久化整个 store。关键在于“按需保存 + 响应式同步”，而不是手动存取 localStorage。
用 persist 配置精准控制关键字字段
在定义 store 时，把搜索关键词作为顶层 state 字段，并通过 persist.paths 明确指定它参与持久化：
- state 中定义
searchKeyword: ''这样的独立字段，避免嵌套（如filters.keyword不被插件识别） - 设置
persist: { paths: ['searchKeyword'] }，只让这个字段自动写入 localStorage - 默认使用 localStorage；若希望新标签页不继承该关键词（比如防止误操作影响其他窗口），可改用 sessionStorage：
storage: sessionStorage
配合 getter 实现带缓存的过滤逻辑
关键字本身只是输入值，真正起作用的是“根据它筛选数据”的逻辑。这部分适合用 getter 封装：
- 定义 getter 如
filteredItems: (state) => state.allItems.filter(i => i.title.includes(state.searchKeyword)) - getter 是响应式的、带缓存的——只要
searchKeyword或allItems不变，就不会重复执行 filter - 组件中直接使用
store.filteredItems，无需额外 watch 或 computed
注意边界情况和初始化时机
页面首次加载时，要确保从持久化存储恢复后的关键字能立刻触发过滤：
- 插件会在 store 初始化时自动从 localStorage 读取并赋值给
searchKeyword，所以 getter 会自然响应 - 如果搜索结果依赖异步接口（比如 keyword 变了才请求 API），建议在 action 中监听
searchKeyword变化，或用 watchEffect 包裹请求逻辑 - 敏感场景（如后台管理系统的搜索条件）可加防抖：在更新
searchKeyword前先clearTimeout，再setTimeout提交
避免常见陷阱
这类状态看似简单，但容易踩坑：
- 不要把函数、DOM 节点、undefined 或 Date 对象放进 state——它们无法被 JSON 序列化，会导致持久化失败或静默丢弃
- 不要在 persist.paths 里写
['filters.keyword']，插件只支持一级属性名 - 如果搜索框是受控组件，记得用
v-model绑定到store.searchKeyword，而非本地 ref，否则持久化就断开了
