$reset 方法可一键将 store 状态重置为初始值,但仅适用于 definestore 定义的 option store(state 必须为返回对象的函数),不支持 setup 语法糖、直接对象写法及响应式引用。

Pinia 的 $reset 方法可以一键将 store 中所有状态恢复为定义时的初始值,前提是该 store 是通过 defineStore 创建的标准 store(非 setup 语法糖写法中的箭头函数形式),且初始状态是可被浅拷贝或直接重赋值的普通对象/值。
✅ 前提:必须使用对象形式定义初始 state
只有当 state 是一个返回对象的函数(推荐写法)时,$reset 才能正常工作:
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: 'Pinia',
items: []
}),
// 其他配置...
})
⚠️ 错误写法(无法重置):
state: () => ({ count: 0 }) // ✅ 正确
state: { count: 0 } // ❌ 不支持,$reset 无效
? 调用 $reset 的几种方式
- 在组件中:获取 store 实例后直接调用
store.$reset() - 在 store 内部:通过
this.$reset()(仅限 option store 的 actions 中) - 在组合式函数中:同组件内调用方式
示例:
const store = useCounterStore() store.count = 999 store.name = 'Changed' store.$reset() // → count 变回 0,name 变回 'Pinia',items 变回 []
⚠️ 注意事项
-
响应式引用不会被重置:如果 state 中包含
ref()、computed()或其他非普通属性,$reset不会处理它们 —— 它只重置state()函数返回的对象的顶层属性 -
插件或手动修改的 state 不受保护:若你用
store.$state = {...}直接替换了整个 state,$reset仍按原始state()函数执行,不是还原最后一次手动赋值 -
setup store 不支持 $reset:用
defineStore(() => { ... })箭头函数写法创建的 store 没有$reset方法
? 替代方案:手动重置(适用于复杂场景)
如果需要更精细控制(比如保留某些字段、重置嵌套对象、或处理 class 实例等),可定义自定义 reset action:
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
user: { id: 1, name: 'Alice' },
cache: new Map()
}),
actions: {
reset() {
this.count = 0
this.user = { id: 1, name: 'Alice' }
this.cache.clear()
}
}
})










