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

使用示例

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

3.6 KiB Raw Blame History Unescape Escape