Vuex插件机制是接收store实例的函数，支持日志记录（如logger）和持久化（如vuex-persistedstate），可组合使用且无需修改源码。
Vuex 的插件机制本质就是一个接收 store 实例的函数，它能在 store 初始化后监听状态变化，从而实现日志记录、持久化等增强能力。不需要修改 Vuex 源码，也不用侵入业务逻辑，只需注册插件即可生效。
用 logger 插件做状态变更日志
官方提供的 vuex/dist/logger.js 是最轻量的日志插件，适合开发调试。它会在每次 mutation 执行后，打印出变更前状态、mutation 类型与载荷、变更后状态。
- 它只响应通过
commit触发的 mutation，直接修改state不会触发日志 - 日志输出在控制台，格式清晰，便于追踪状态流转路径
- 生产环境建议关闭，避免影响性能和暴露敏感数据
用 vuex-persistedstate 实现自动持久化
这是目前最主流的持久化插件，基于 localStorage 自动同步 state，刷新页面不丢数据。
- 安装：
npm install vuex-persistedstate - 配置时可指定 key（默认
vuex）、存储位置（localStorage 或 sessionStorage）、白名单模块（如只存user和cart） - 它在 store 初始化时读取本地缓存还原 state，并在每次 mutation 后自动写入，内部已做防抖处理，避免高频写入
手动实现简易持久化插件
如果项目极简或想完全掌控逻辑，可以自己写一个插件函数：
立即学习“前端免费学习笔记（深入）”；
- 初始化时从 localStorage 读取并调用
store.replaceState()还原 - 监听
store.subscribe()，在 mutation 后序列化整个 state 并存入 localStorage - 注意：不要直接存整个 rootState，应过滤掉不可序列化的值（如函数、Promise），推荐只存明确需要持久化的字段
组合使用多个插件
Vuex 支持同时注册多个插件，顺序执行。比如开发阶段可同时启用 logger 和 persistedstate：
- logger 在前，先记录；persistedstate 在后，再保存
- 插件之间互不影响，各自封装职责，符合单一原则
- 上线时移除 logger，保留 persistedstate 即可
