签入版本
This commit is contained in:
@@ -1,30 +1,40 @@
|
||||
# H. 前端 Store 速查
|
||||
|
||||
:::tip 概述
|
||||
前端使用 Pinia 进行全局状态管理,核心 Store 定义在 `ui/src/store/modules/` 目录下。
|
||||
前端使用 Pinia 进行全局状态管理,核心 Store 定义在 `ui/src/store/modules/` 目录下,入口为 `ui/src/store/index.ts`(`setupStore()` 挂载)。
|
||||
:::
|
||||
|
||||
## userStore
|
||||
|
||||
**文件**:`store/modules/user.ts`
|
||||
**文件**:`ui/src/store/modules/user.ts`(id:`app-user`,token/用户信息持久化到 localStorage)
|
||||
|
||||
### 状态
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `token` | string | JWT Token |
|
||||
| `token` | string | JWT Token(`ACCESS_TOKEN`) |
|
||||
| `username` | string | 用户名 |
|
||||
| `welcome` | string | 欢迎语 |
|
||||
| `avatar` | string | 头像 URL |
|
||||
| `permissions` | string[] | 权限列表 |
|
||||
| `info` | object | 用户信息 |
|
||||
| `permissions` | any[] | 权限列表 |
|
||||
| `info` | object | 用户信息(`CURRENT_USER`) |
|
||||
|
||||
### Getters
|
||||
|
||||
| Getter | 说明 |
|
||||
|--------|------|
|
||||
| `getToken` / `getAvatar` / `getNickname` | 取 token / 头像 / 昵称 |
|
||||
| `getPermissions` | 取权限列表 |
|
||||
| `getUserInfo` | 取用户信息 |
|
||||
|
||||
### Actions
|
||||
|
||||
| Action | 说明 | 返回 |
|
||||
|--------|------|------|
|
||||
| `login(userInfo)` | 登录 | Promise |
|
||||
| `GetInfo()` | 获取用户信息 | Promise |
|
||||
| `logout()` | 登出 | Promise |
|
||||
| Action | 说明 |
|
||||
|--------|------|
|
||||
| `setToken` / `setAvatar` / `setPermissions` / `setUserInfo` | 状态写入 |
|
||||
| `login(userInfo)` | 登录,成功后写入 `access_token`(7 天过期) |
|
||||
| `GetInfo()` | 拉取用户信息与权限列表 |
|
||||
| `logout()` | 登出,清空状态与本地存储 |
|
||||
|
||||
### 使用示例
|
||||
|
||||
@@ -48,29 +58,23 @@ await userStore.logout();
|
||||
|
||||
## asyncRouteStore
|
||||
|
||||
**文件**:`store/modules/asyncRoute.ts`
|
||||
**文件**:`ui/src/store/modules/asyncRoute.ts`(id:`app-async-route`)
|
||||
|
||||
### 状态
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `menus` | array | 菜单列表 |
|
||||
| `keepAliveComponents` | string[] | 缓存的组件名 |
|
||||
| `isDynamicAddedRoute` | boolean | 是否已添加动态路由 |
|
||||
|
||||
### Actions
|
||||
|
||||
| Action | 说明 |
|
||||
| 字段 / Action | 说明 |
|
||||
|--------|------|
|
||||
| `generateRoutes(userInfo)` | 从后端获取菜单并生成路由 |
|
||||
| `routers` / `getRouters()` | 已生成的动态路由 |
|
||||
| `menus` / `getMenus()` | 菜单列表(侧边栏渲染源) |
|
||||
| `isDynamicAddedRoute` / `getIsDynamicAddedRoute()` | 动态路由是否已添加 |
|
||||
| `setRouters(routers)` / `setMenus(menus)` | 写入路由与菜单 |
|
||||
| `setDynamicAddedRoute(flag)` | 设置动态路由添加状态 |
|
||||
| `setKeepAliveComponents(components)` | 设置 keep-alive 组件列表 |
|
||||
| `removeKeepAliveComponents(compNames)` | 移除指定缓存组件 |
|
||||
|
||||
---
|
||||
|
||||
## projectSettingStore
|
||||
|
||||
**文件**:`store/modules/projectSetting.ts`
|
||||
**文件**:`ui/src/store/modules/projectSetting.ts`(id:`app-project-setting`)
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
@@ -83,7 +87,7 @@ await userStore.logout();
|
||||
|
||||
## ossConfigStore
|
||||
|
||||
**文件**:`store/modules/ossConfig.ts`
|
||||
**文件**:`ui/src/store/modules/ossConfig.ts`
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
@@ -95,7 +99,7 @@ await userStore.logout();
|
||||
|
||||
## designSettingStore
|
||||
|
||||
**文件**:`store/modules/designSetting.ts`
|
||||
**文件**:`ui/src/store/modules/designSetting.ts`(id:`app-design-setting`)
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
@@ -106,7 +110,7 @@ await userStore.logout();
|
||||
|
||||
## tabsViewStore
|
||||
|
||||
**文件**:`store/modules/tabsView.ts`
|
||||
**文件**:`ui/src/store/modules/tabsView.ts`(id:`app-tabs-view`)
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
@@ -121,11 +125,22 @@ await userStore.logout();
|
||||
|
||||
---
|
||||
|
||||
## lockscreenStore
|
||||
|
||||
**文件**:`ui/src/store/modules/lockscreen.ts`(id:`app-lockscreen`)
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `isLock` | 是否锁屏 |
|
||||
| `lockPassWord` | 锁屏密码 |
|
||||
|
||||
---
|
||||
|
||||
## 在组件外使用
|
||||
|
||||
```typescript
|
||||
// 在 setup 外使用 Store
|
||||
// 在 setup 外使用 Store(传入 Pinia 实例)
|
||||
import { useUserStoreWidthOut } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStoreWidthOut();
|
||||
```
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user