直接调用 store.$reset() 可还原状态，前提是 state 必须为返回新对象的函数（如 state: () => ({ count: 0, token: '' })），且 Pinia ≥ 2.0.19；setup 风格 store 需手动注入 $reset 插件。
直接调用 store.$reset() 就能还原状态，但前提是 store 的 state 必须写成返回新对象的函数，且 Pinia 版本 ≥ 2.0.19（当前主流版本均满足）。
确保 state 是可重置的函数形式
Pinia 的 $reset() 依赖每次调用 state() 都生成一个全新对象。只要写对了形式，重置就自动生效。
-
✅ 正确写法：用箭头函数直接返回对象字面量，例如
state: () => ({ count: 0, token: '' }) -
❌ 错误写法：复用外部变量，如
const initState = { count: 0 }; state: () => initState—— 这会导致多个 store 实例共享同一对象，响应式失效或数据污染 - TypeScript 下建议显式标注返回类型，比如
state: (): { count: number; token: string } => ({ count: 0, token: '' })，避免类型推断出错
在组件中安全调用 $reset()
调用后状态立即更新，但视图是否同步取决于你如何使用 store。
- 模板中直接写
{{ store.count }}或绑定:count="store.count"，会自动响应 - 如果已解构，如
const { count } = store，解构变量不会更新 —— 应改用toRefs(store)或始终通过store.count访问 - 子组件接收
props时，$reset后 Vue 能正确触发更新，无需额外处理
配合登出等业务流程完整清理
重置 store 只是其中一环，真实场景中还需同步处理其他“影子数据”。
- 先清除敏感字段：如移除 token、清空用户信息、注销菜单和路由缓存
- 再调用各 store 的
$reset()，例如userStore.$reset()、cartStore.$reset() - 手动清理持久化数据：删除
localStorage或sessionStorage中对应字段 - 取消未完成请求、清除定时器、重置 URL 查询参数，防止内存泄漏或逻辑错乱
组合式写法需额外支持 $reset
若 store 使用 setup 函数定义（非 options 形式），默认不带 $reset 方法，需在 Pinia 实例上手动注入。
- 在
main.ts创建 pinia 后添加插件： pinia.use(({ store }) => { const initialState = JSON.parse(JSON.stringify(store.$state)); store.$reset = () => store.$patch(initialState); });- 该方式通过深拷贝初始状态实现重置，适用于 setup 风格 store，但要注意嵌套引用对象可能丢失响应式
