# 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`

| 字段 | 说明 |
|------|------|
| `navMode` | 导航模式（侧边/顶部） |
| `navTheme` | 导航主题（暗色/亮色） |
| `isShowMenuBar` | 是否显示菜单栏 |
| `isCollapse` | 菜单是否折叠 |

---

## ossConfigStore

**文件**：`store/modules/ossConfig.ts`

| 字段 | 说明 |
|------|------|
| `ossConfig` | 云存储配置 |

路由守卫中初始化，用于文件上传。

---

## designSettingStore

**文件**：`store/modules/designSetting.ts`

| 字段 | 说明 |
|------|------|
| `appTheme` | 主题色 |
| `darkMode` | 是否暗色模式 |

---

## tabsViewStore

**文件**：`store/modules/tabsView.ts`

| 字段 | 说明 |
|------|------|
| `tabsList` | 标签页列表 |

| Action | 说明 |
|--------|------|
| `addTab(route)` | 添加标签 |
| `removeTab(route)` | 关闭标签 |
| `closeOtherTabs(route)` | 关闭其他标签 |
| `closeAllTabs()` | 关闭所有标签 |

---

## 在组件外使用

```typescript
// 在 setup 外使用 Store
import { useUserStoreWidthOut } from '@/store/modules/user';

const userStore = useUserStoreWidthOut();
```