45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
# 9.6 状态管理（Pinia）
|
||
|
||
:::tip 概述
|
||
全局状态集中在 7 个 Pinia 模块：用户身份、动态路由、标签页、设计设置、项目设置、锁屏、OSS 配置。页面局部状态不进 store。
|
||
:::
|
||
|
||
## Store 清单
|
||
|
||
| 模块 | 职责 | 持久化 |
|
||
|---|---|---|
|
||
| user | token、用户信息、权限集合 | token 经 storage 持久化 |
|
||
| asyncRoute | 菜单树、动态路由表、是否已注入标记 | — |
|
||
| tabsView | 标签页导航（多页签状态） | 经 storage |
|
||
| designSetting | 主题配色、布局尺寸、组件大小 | 经 storage |
|
||
| projectSetting | 项目级开关（水印、锁屏、面包屑等） | 经 storage |
|
||
| lockscreen | 锁屏状态 | 经 storage |
|
||
| ossConfig | 对象存储配置（直传场景） | — |
|
||
|
||
## mutation-types 与 storage
|
||
|
||
`store/mutation-types.ts` 定义 storage 键名常量（ACCESS_TOKEN、FIRST_ROUTE 等），`utils/Storage` 提供统一持久化读写——**不散落裸字符串键**。
|
||
|
||
## 使用规约
|
||
|
||
| 规约 | 说明 |
|
||
|---|---|
|
||
| 跨页面才进 store | 表单草稿等页面内状态用 ref |
|
||
| 组合式风格 | `useUserStore()` 调用式获取，避免 Pinia 旧式选项冗余 |
|
||
| 宽访问出口 | `useUserStoreWidthOut()` 供守卫等场景（脱离组件上下文） |
|
||
| 权限只读 | 权限集合由 GetInfo 写入，业务只读判定 |
|
||
|
||
## 与后端的数据流
|
||
|
||
```text
|
||
登录 → token 写 storage + user store
|
||
路由守卫 → GetInfo 填 user store（含权限集合）→ generateRoutes 填 asyncRoute store
|
||
登出/401 → 清 token 与相关 store → 跳登录
|
||
```
|
||
|
||
## 相关
|
||
|
||
- [9.5 路由与动态菜单](/zh/frontend/router.html)
|
||
- [9.7 权限控制](/zh/frontend/permission.html)
|
||
- [附录 I 前端 Store 速查](/zh/appendix/stores.html)
|