127 lines
2.8 KiB
Markdown
127 lines
2.8 KiB
Markdown
# H. 前端 Store 速查
|
||
|
||
:::tip 概述
|
||
前端使用 Pinia 进行全局状态管理，核心 Store 定义在 `ui/src/store/modules/` 目录下。
|
||
:::
|
||
|
||
## userStore
|
||
|
||
**文件**：`store/modules/user.ts`
|
||
|
||
### 状态
|
||
|
||
| 字段 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `token` | string | JWT Token |
|
||
| `username` | string | 用户名 |
|
||
| `avatar` | string | 头像 URL |
|
||
| `permissions` | string[] | 权限列表 |
|
||
| `info` | object | 用户信息 |
|
||
|
||
### Actions
|
||
|
||
| Action | 说明 | 返回 |
|
||
|--------|------|------|
|
||
| `login(userInfo)` | 登录 | Promise |
|
||
| `GetInfo()` | 获取用户信息 | Promise |
|
||
| `logout()` | 登出 | Promise |
|
||
|
||
### 使用示例
|
||
|
||
```typescript
|
||
import { useUserStore } from '@/store/modules/user';
|
||
|
||
const userStore = useUserStore();
|
||
|
||
// 登录
|
||
await userStore.login({ username: 'admin', password: '123456' });
|
||
|
||
// 获取用户信息
|
||
const info = userStore.getUserInfo;
|
||
const permissions = userStore.getPermissions;
|
||
|
||
// 登出
|
||
await userStore.logout();
|
||
```
|
||
|
||
---
|
||
|
||
## asyncRouteStore
|
||
|
||
**文件**：`store/modules/asyncRoute.ts`
|
||
|
||
### 状态
|
||
|
||
| 字段 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `menus` | array | 菜单列表 |
|
||
| `keepAliveComponents` | string[] | 缓存的组件名 |
|
||
| `isDynamicAddedRoute` | boolean | 是否已添加动态路由 |
|
||
|
||
### Actions
|
||
|
||
| Action | 说明 |
|
||
|--------|------|
|
||
| `generateRoutes(userInfo)` | 从后端获取菜单并生成路由 |
|
||
| `setDynamicAddedRoute(flag)` | 设置动态路由添加状态 |
|
||
| `setKeepAliveComponents(components)` | 设置 keep-alive 组件列表 |
|
||
|
||
---
|
||
|
||
## projectSettingStore
|
||
|
||
**文件**：`store/modules/projectSetting.ts`
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `layout` | 布局模式（side 侧边 / top 顶部 / mix 拆分） |
|
||
| `navTheme` | 导航主题（light / dark） |
|
||
| `headerTheme` | 标题栏主题 |
|
||
| `menuSetting` | 菜单配置（宽度、折叠、固定等） |
|
||
| `multiTabsSetting` | 多标签页配置 |
|
||
| `permissionMode` | 菜单权限模式（ROLE / BACK） |
|
||
| `isWaterMark` | 是否显示水印 |
|
||
|
||
---
|
||
|
||
## tabsViewStore
|
||
|
||
**文件**：`store/modules/tabsView.ts`
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `tabsList` | 标签页列表 |
|
||
|
||
| Action | 说明 |
|
||
|--------|------|
|
||
| `addTabs(route)` | 添加标签 |
|
||
| `closeCurrentTab(route)` | 关闭当前标签 |
|
||
| `closeOtherTabs(route, activeKey)` | 关闭其他标签 |
|
||
| `closeAllTabs()` | 关闭所有标签 |
|
||
|
||
---
|
||
|
||
## lockscreenStore
|
||
|
||
**文件**：`store/modules/lockscreen.ts`
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `isLock` | 是否锁屏 |
|
||
| `lockTime` | 锁屏剩余时间 |
|
||
|
||
| Action | 说明 |
|
||
|--------|------|
|
||
| `setLock(flag)` | 设置锁屏状态（持久化到 Storage） |
|
||
| `setLockTime(time)` | 设置锁屏时间 |
|
||
|
||
---
|
||
|
||
## 在组件外使用
|
||
|
||
```typescript
|
||
// 在 setup 外使用 Store
|
||
import { useUserStoreWidthOut } from '@/store/modules/user';
|
||
|
||
const userStore = useUserStoreWidthOut();
|
||
``` |