H. 前端 Store 速查

概述

前端使用 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();