SSR 支持
SSR 下每个请求独立 pinia 实例,服务端序列化 pinia.state.value,客户端 hydrate 后接管,避免与别的请求或上一次导航共享状态。
1. 流程
mermaid
sequenceDiagram
participant S as 服务端
participant C as 客户端
S->>S: createPinia + render
S->>C: HTML + serializedState
C->>C: createPinia + hydrate
C->>C: 交互继续 patch2. 关键点
| 点 | 说明 |
|---|---|
state: () => ({}) | 每 store 独立初始对象 |
pinia.state.value | 序列化单一数据源 |
hydrate / Nuxt 自动 | 合并服务端 state |
| 仅客户端 API | 放 onMounted 或 i |
3. Options store 的 hydrate 钩子
可对特定 store 定制水合逻辑(覆盖字段、忽略临时字段)。
4. 误区
| 误区 | 后果 |
|---|---|
| 模块级单例 pinia 跨请求 | 用户 A 看到用户 B 数据 |
| 水合前后 state 形状不一致 | 警告 / 闪动 |
在 setup 顶层访问 window | SSR 报错 |
5. Nuxt
@pinia/nuxt 自动注入、序列化;优先用生态方案而非手写 hydrate。
6. 总结
SSR = 请求级 pinia + 序列化一棵树;与 Zustand SSR 的 snapshot 思想类似,实现栈不同。