2.6 KiB
2.6 KiB
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 |
使用示例
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() |
关闭所有标签 |
在组件外使用
// 在 setup 外使用 Store
import { useUserStoreWidthOut } from '@/store/modules/user';
const userStore = useUserStoreWidthOut();