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 |
使用示例
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
| Action |
说明 |
addTabs(route) |
添加标签 |
closeCurrentTab(route) |
关闭当前标签 |
closeOtherTabs(route, activeKey) |
关闭其他标签 |
closeAllTabs() |
关闭所有标签 |
lockscreenStore
文件:store/modules/lockscreen.ts
| 字段 |
说明 |
isLock |
是否锁屏 |
lockTime |
锁屏剩余时间 |
| Action |
说明 |
setLock(flag) |
设置锁屏状态(持久化到 Storage) |
setLockTime(time) |
设置锁屏时间 |
在组件外使用