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

字段	说明
layout	布局模式（side 侧边 / top 顶部 / mix 拆分）
navTheme	导航主题（light / dark）
headerTheme	标题栏主题
menuSetting	菜单配置（宽度、折叠、固定等）
multiTabsSetting	多标签页配置
permissionMode	菜单权限模式（ROLE / BACK）
isWaterMark	是否显示水印

---

tabsViewStore

文件：store/modules/tabsView.ts

字段	说明
tabsList	标签页列表

Action	说明
addTabs(route)	添加标签
closeCurrentTab(route)	关闭当前标签
closeOtherTabs(route, activeKey)	关闭其他标签
closeAllTabs()	关闭所有标签

---

lockscreenStore

文件：store/modules/lockscreen.ts

字段	说明
isLock	是否锁屏
lockTime	锁屏剩余时间

Action	说明
setLock(flag)	设置锁屏状态（持久化到 Storage）
setLockTime(time)	设置锁屏时间

---

在组件外使用

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

const userStore = useUserStoreWidthOut();