H. 前端 Store 速查
:::tip 概述
前端使用 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() |
登出,清空状态与本地存储 |
使用示例
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 |
菜单是否折叠 |
tabsViewStore
文件:ui/src/store/modules/tabsView.ts(id:app-tabs-view)
| Action |
说明 |
addTab(route) |
添加标签 |
removeTab(route) |
关闭标签 |
closeOtherTabs(route) |
关闭其他标签 |
closeAllTabs() |
关闭所有标签 |
lockscreenStore
文件:ui/src/store/modules/lockscreen.ts(id:app-lockscreen)
| 字段 |
说明 |
isLock |
是否锁屏 |
lockPassWord |
锁屏密码 |
在组件外使用