Pinia-React 用 State、Getter 和 Action 组织共享业务状态,追踪组件实际读取的路径。Zustand 使用 state creator 和显式 selector。两者是不同的编写模型,不是兼容 API。
| 需求 | Pinia-React | Zustand |
|---|---|---|
| 小型共享值 | Store 结构可能超出需要 | 通常很直接 |
| 业务边界 | 具名 State、缓存 Getter 和 Action | 应用约定与可选 slices |
| 组件依赖 | 自动读取路径追踪 | 显式 selector |
| 不可变修改 | Action 和函数 patch 内置 Immer | 不可变更新,可选 Immer middleware |
| SSR | 请求快照和有作用域的 Provider | 请求级 Store 和 React 绑定 |
组件局部状态留在组件。业务结构有帮助时选择 Pinia-React;需要小型灵活原语和显式订阅时,Zustand 更合适。两者都不能替代服务端校验,也不保证应用整体性能更好。
从仓库根目录执行:
打开 #comparison,两边执行相同的计数、资料、购物车和异步更新。渲染计数让订阅行为可见,Strict Mode 和其他 React 工作会影响计数,不能当作速度评分。
打开 #checkout,查看使用同一表单、请求桩和恢复规则的业务闭环。Pinia 使用四个业务 Store,Zustand 使用一个 vanilla creator;这是合理的小型 Zustand 实现,不要求照搬 Pinia 结构。可选持久化、DevTools 和 Next.js 接入只作演示,不是等价 middleware 对比。
迁移建议见选择状态模型。
Zustand API 和 SSR 模型以其官方 React Store API、vanilla Store API 和 Next.js 指南为准。