签入版本

2026-09-29 10:14:04 +08:00
parent 3e5fc01124
commit d6b552103d
1664 changed files with 298944 additions and 0 deletions
@@ -0,0 +1,86 @@
+# 9.6 状态管理（Pinia）
+
+:::tip 概述
+前端使用 Pinia 进行全局状态管理，核心 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` | 标签页 |
+
+## userStore 核心代码
+
+```typescript
+// src/store/modules/user.ts
+
+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;
+    },
+
+    // 登出
+    async logout() {
+      await logout();
+      this.setPermissions([]);
+      this.setUserInfo('');
+      storage.remove(ACCESS_TOKEN);
+      storage.remove(CURRENT_USER);
+    },
+  },
+});
+```
+
+## 在组件中使用
+
+:::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();
+```