状态管理

XYGo Admin 2025-02-20 82 次阅读

Pinia 3 状态管理与持久化策略

状态管理

概述

项目使用 Pinia 3 + pinia-plugin-persistedstate 进行状态管理，Store 文件位于 web/src/store/modules/。

核心 Store

Store	文件	说明
useUserStore	`modules/user.ts`	后台管理员状态（Token、用户信息、语言、锁屏）
useMemberStore	`modules/member.ts`	前台会员状态（独立 Token、会员信息）
useSiteStore	`modules/site.ts`	站点信息（站名、Logo、主题色、ICP）
useMenuStore	`modules/menu.ts`	后台菜单状态
useSettingStore	`modules/setting.ts`	系统设置（主题、布局、颜色）
useWorktabStore	`modules/worktab.ts`	工作标签页状态
useTableStore	`modules/table.ts`	表格配置状态
useMemberMenuStore	`modules/memberMenu.ts`	前台会员菜单

使用示例

typescript 复制代码

import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

// 读取状态
console.log(userStore.token)
console.log(userStore.userInfo)

// 修改状态
userStore.setToken('new-token')
userStore.setUserInfo({ username: 'admin' })

// 清除状态（登出）
userStore.logout()

持久化策略

使用 StorageKeyManager 生成版本化存储键：

复制代码

格式：sys-v{version}-{storeId}
示例：sys-v3.0-user

支持跨版本数据迁移，版本升级时自动清理旧数据。

typescript 复制代码

// store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

前后台 Token 隔离

后台管理员 Token 存储在 useUserStore，通过 Authorization: Bearer 传递
前台会员 Token 存储在 useMemberStore，通过 Xy-User-Token Header 传递
两套 Token 完全独立，互不影响