Store 实现机制
defineStore(id, options | setup) 注册一个带 id 的 store:状态进入 Pinia 根实例的 state 树,对外暴露 getters、actions,并在组件中通过 useXxxStore() 消费。
源码:packages/pinia/src/store.ts、storeSetup.ts。
1. 两种定义方式
| 方式 | 适用 |
|---|---|
| Options | state / getters / actions,类 Vuex 2 选项式 |
| Setup | () => { ref; computed; function },组合式 API |
二者最终都落到同一内部 store 对象;Setup 更灵活,Options 更易迁移 Vuex。
2. 核心能力(概念)
| 成员 | 行为 |
|---|---|
$state | 可替换的整包 state(持久化/水合) |
$patch | 部分更新或批量函数式更新 |
$reset | Options store 恢复初始 state |
$subscribe | 监听 state 变化(mutation 风格回调) |
$onAction | 监听 action 调用与结果 |
3. 单例与 Map
- Pinia 实例用
Map<id, store>缓存已创建 store。 - 同 id 多次
useStore()返回同一实例(同应用内)。 - SSR:每请求一个 pinia 实例,避免串状态(见 06-SSR)。
4. state 函数形式
state: () => ({ count: 0 }) 而非 plain 对象:避免多 store 共享同一引用(SSR 与 HMR 安全)。见 08 §3。
5. 与组件
- 必须在
app.use(pinia)之后useStore()。 - 在
setup或<script setup>中调用;不要在异步回调里「首次」创建 store 依赖(除非已保证 pinia 激活)。
6. 总结
defineStore = 注册表项 + 响应式 state + 包装后的 actions/getters;读源码抓 $patch 与 store 安装流程即可串起全链路。