Pinia Store设计模式
Pinia 在 store 拆分、状态边界、action 归属与共享策略上的常见设计模式。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 基础概念: pinia
- 相关主题: vue-component-design-principles, vue-router-guards-and-permission-control
Pinia Store设计模式
Pinia 真正难的地方通常不是 API，而是 store 到底该怎么拆、什么状态该进 store、action 应该放在哪一层。
先判断什么状态值得进 store
适合进入 Pinia 的通常是：
- 多个页面或组件共享的业务状态
- 登录、权限、主题、全局筛选条件这类横切状态
- 需要统一追踪、统一修改入口的业务数据
不适合进入 Pinia 的通常是：
- 组件内部临时 UI 状态
- 只服务于一个局部组件的表单输入过程
- 没有共享价值的短生命周期状态
常见拆分方式
按业务域拆分
最常见也最稳定，比如 user、permission、cart、project。
按页面硬拆通常不稳定
如果直接按页面名拆 store，后面页面一复用数据，边界就容易混乱。
action 的归属原则
- 改变 store 自己状态的业务动作，优先写在 action
- 纯派生结果，优先写成 getter
- 只属于单个页面的临时流程，不一定要塞进 store
一个常见稳定结构
state保存事实getters提供派生视图actions负责异步请求、状态写入和业务编排
常见误区
- 把 store 当成全局杂物箱
- 在组件里到处直接改共享状态，导致修改入口分散
- state 里保存大量本可由 getter 推导出的重复数据
最短记忆方式
Pinia 设计重点不是“全局化”，而是把共享业务状态放到清晰、稳定、可追踪的位置。