H. 前端 Store 速查

概述

前端使用 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()	登出，清空状态与本地存储

使用示例

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	锁屏密码

---

在组件外使用

// 在 setup 外使用 Store（传入 Pinia 实例）
import { useUserStoreWidthOut } from '@/store/modules/user';

const userStore = useUserStoreWidthOut();