签入版本

2026-10-25 17:24:27 +08:00
parent 48911cc08f
commit fdbeae092a
1010 changed files with 30682 additions and 95274 deletions
@@ -1,86 +1,44 @@
 # 9.6 状态管理（Pinia）

 :::tip 概述
-前端使用 Pinia 进行全局状态管理，核心 Store 包含用户信息、动态路由、项目配置等。
+全局状态集中在 7 个 Pinia 模块：用户身份、动态路由、标签页、设计设置、项目设置、锁屏、OSS 配置。页面局部状态不进 store。
 :::

 ## Store 清单

-| Store | 文件 | 说明 |
-|-------|------|------|
-| userStore | `store/modules/user.ts` | Token / 用户信息 / 权限列表 / 登录登出 |
-| asyncRouteStore | `store/modules/asyncRoute.ts` | 动态路由 / keep-alive 缓存 |
-| projectSettingStore | `store/modules/projectSetting.ts` | 项目配置 |
-| ossConfigStore | `store/modules/ossConfig.ts` | 云存储配置 |
-| designSettingStore | `store/modules/designSetting.ts` | 主题设计 |
-| lockscreenStore | `store/modules/lockscreen.ts` | 锁屏 |
-| tabsViewStore | `store/modules/tabsView.ts` | 标签页 |
+| 模块 | 职责 | 持久化 |
+|---|---|---|
+| user | token、用户信息、权限集合 | token 经 storage 持久化 |
+| asyncRoute | 菜单树、动态路由表、是否已注入标记 | — |
+| tabsView | 标签页导航（多页签状态） | 经 storage |
+| designSetting | 主题配色、布局尺寸、组件大小 | 经 storage |
+| projectSetting | 项目级开关（水印、锁屏、面包屑等） | 经 storage |
+| lockscreen | 锁屏状态 | 经 storage |
+| ossConfig | 对象存储配置（直传场景） | — |

-## userStore 核心代码
+## mutation-types 与 storage

-```typescript
-// src/store/modules/user.ts
+`store/mutation-types.ts` 定义 storage 键名常量（ACCESS_TOKEN、FIRST_ROUTE 等），`utils/Storage` 提供统一持久化读写——**不散落裸字符串键**。

-export const useUserStore = defineStore({
-  id: 'app-user',
-  state: (): IUserState => ({
-    token: Storage.get(ACCESS_TOKEN, ''),
-    username: '',
-    avatar: '',
-    permissions: [],
-    info: Storage.get(CURRENT_USER, {}),
-  }),
-  actions: {
-    // 登录
-    async login(userInfo) {
-      const response = await login(userInfo);
-      if (response.code === 0) {
-        storage.set(ACCESS_TOKEN, response.data.access_token);
-        this.setToken(response.data.access_token);
-      }
-      return response;
-    },
+## 使用规约

-    // 获取用户信息
-    async GetInfo() {
-      const res = await getUserInfo();
-      this.setPermissions(res.permissions);
-      this.setUserInfo(res);
-      this.setAvatar(res.avatar);
-      return res;
-    },
+| 规约 | 说明 |
+|---|---|
+| 跨页面才进 store | 表单草稿等页面内状态用 ref |
+| 组合式风格 | `useUserStore()` 调用式获取，避免 Pinia 旧式选项冗余 |
+| 宽访问出口 | `useUserStoreWidthOut()` 供守卫等场景（脱离组件上下文） |
+| 权限只读 | 权限集合由 GetInfo 写入，业务只读判定 |

-    // 登出
-    async logout() {
-      await logout();
-      this.setPermissions([]);
-      this.setUserInfo('');
-      storage.remove(ACCESS_TOKEN);
-      storage.remove(CURRENT_USER);
-    },
-  },
-});
+## 与后端的数据流
+
+```text
+登录 → token 写 storage + user store
+路由守卫 → GetInfo 填 user store（含权限集合）→ generateRoutes 填 asyncRoute store
+登出/401 → 清 token 与相关 store → 跳登录
 ```

-## 在组件中使用
+## 相关

-:::tip Store 使用方式
- 在 `setup` 中：`const userStore = useUserStore()`
- 在 `setup` 外：`const userStore = useUserStoreWidthOut()`
-:::
-
-```typescript
-import { useUserStore } from '@/store/modules/user';
-
-const userStore = useUserStore();
-
-// 获取用户信息
-const username = userStore.username;
-const permissions = userStore.permissions;
-
-// 登录
-await userStore.login({ username: 'admin', password: '123456' });
-
-// 登出
-await userStore.logout();
-```
+- [9.5 路由与动态菜单](/zh/frontend/router.html)
+- [9.7 权限控制](/zh/frontend/permission.html)
+- [附录 I 前端 Store 速查](/zh/appendix/stores.html)