147 lines
3.6 KiB
Markdown
147 lines
3.6 KiB
Markdown
# H. 前端 Store 速查
|
||
|
||
:::tip 概述
|
||
前端使用 Pinia 进行全局状态管理，核心 Store 定义在 `ui/src/store/modules/` 目录下，入口为 `ui/src/store/index.ts`（`setupStore()` 挂载）。
|
||
:::
|
||
|
||
## userStore
|
||
|
||
**文件**：`ui/src/store/modules/user.ts`（id：`app-user`，token/用户信息持久化到 localStorage）
|
||
|
||
### 状态
|
||
|
||
| 字段 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `token` | string | JWT Token（`ACCESS_TOKEN`） |
|
||
| `username` | string | 用户名 |
|
||
| `welcome` | string | 欢迎语 |
|
||
| `avatar` | string | 头像 URL |
|
||
| `permissions` | any[] | 权限列表 |
|
||
| `info` | object | 用户信息（`CURRENT_USER`） |
|
||
|
||
### Getters
|
||
|
||
| Getter | 说明 |
|
||
|--------|------|
|
||
| `getToken` / `getAvatar` / `getNickname` | 取 token / 头像 / 昵称 |
|
||
| `getPermissions` | 取权限列表 |
|
||
| `getUserInfo` | 取用户信息 |
|
||
|
||
### Actions
|
||
|
||
| Action | 说明 |
|
||
|--------|------|
|
||
| `setToken` / `setAvatar` / `setPermissions` / `setUserInfo` | 状态写入 |
|
||
| `login(userInfo)` | 登录，成功后写入 `access_token`（7 天过期） |
|
||
| `GetInfo()` | 拉取用户信息与权限列表 |
|
||
| `logout()` | 登出，清空状态与本地存储 |
|
||
|
||
### 使用示例
|
||
|
||
```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
|
||
|
||
**文件**：`ui/src/store/modules/asyncRoute.ts`（id：`app-async-route`）
|
||
|
||
| 字段 / Action | 说明 |
|
||
|--------|------|
|
||
| `routers` / `getRouters()` | 已生成的动态路由 |
|
||
| `menus` / `getMenus()` | 菜单列表（侧边栏渲染源） |
|
||
| `isDynamicAddedRoute` / `getIsDynamicAddedRoute()` | 动态路由是否已添加 |
|
||
| `setRouters(routers)` / `setMenus(menus)` | 写入路由与菜单 |
|
||
| `setDynamicAddedRoute(flag)` | 设置动态路由添加状态 |
|
||
| `setKeepAliveComponents(components)` | 设置 keep-alive 组件列表 |
|
||
| `removeKeepAliveComponents(compNames)` | 移除指定缓存组件 |
|
||
|
||
---
|
||
|
||
## projectSettingStore
|
||
|
||
**文件**：`ui/src/store/modules/projectSetting.ts`（id：`app-project-setting`）
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `navMode` | 导航模式（侧边/顶部） |
|
||
| `navTheme` | 导航主题（暗色/亮色） |
|
||
| `isShowMenuBar` | 是否显示菜单栏 |
|
||
| `isCollapse` | 菜单是否折叠 |
|
||
|
||
---
|
||
|
||
## ossConfigStore
|
||
|
||
**文件**：`ui/src/store/modules/ossConfig.ts`
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `ossConfig` | 云存储配置 |
|
||
|
||
路由守卫中初始化，用于文件上传。
|
||
|
||
---
|
||
|
||
## designSettingStore
|
||
|
||
**文件**：`ui/src/store/modules/designSetting.ts`（id：`app-design-setting`）
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `appTheme` | 主题色 |
|
||
| `darkMode` | 是否暗色模式 |
|
||
|
||
---
|
||
|
||
## tabsViewStore
|
||
|
||
**文件**：`ui/src/store/modules/tabsView.ts`（id：`app-tabs-view`）
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `tabsList` | 标签页列表 |
|
||
|
||
| Action | 说明 |
|
||
|--------|------|
|
||
| `addTab(route)` | 添加标签 |
|
||
| `removeTab(route)` | 关闭标签 |
|
||
| `closeOtherTabs(route)` | 关闭其他标签 |
|
||
| `closeAllTabs()` | 关闭所有标签 |
|
||
|
||
---
|
||
|
||
## lockscreenStore
|
||
|
||
**文件**：`ui/src/store/modules/lockscreen.ts`（id：`app-lockscreen`）
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| `isLock` | 是否锁屏 |
|
||
| `lockPassWord` | 锁屏密码 |
|
||
|
||
---
|
||
|
||
## 在组件外使用
|
||
|
||
```typescript
|
||
// 在 setup 外使用 Store（传入 Pinia 实例）
|
||
import { useUserStoreWidthOut } from '@/store/modules/user';
|
||
|
||
const userStore = useUserStoreWidthOut();
|
||
```
|