Files
2026-10-10 19:17:02 +08:00

2.8 KiB
Raw Permalink Blame History

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

使用示例

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();