Pinia 状态管理

Forge 使用 Pinia 3 管理全局状态。你需要了解 Store 的定义方式和使用场景。

Store 定义

// src/stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const token = ref<string>('')
  const userInfo = ref<UserInfo | null>(null)
  const roles = ref<string[]>([])
  const permissions = ref<string[]>([])

  function setToken(value: string) {
    token.value = value
  }

  function setUserInfo(info: UserInfo) {
    userInfo.value = info
  }

  function clear() {
    token.value = ''
    userInfo.value = null
    roles.value = []
    permissions.value = []
  }

  return { token, userInfo, roles, permissions, setToken, setUserInfo, clear }
})

使用 Store

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

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

// 调用方法
userStore.setToken('xxx')
userStore.clear()

核心 Store

Store	路径	职责
useUserStore	stores/user.ts	Token、用户信息、角色权限
usePermissionStore	stores/permission.ts	菜单、路由、按钮权限
useAppStore	stores/app.ts	应用配置（主题、折叠状态）

useUserStore

const userStore = useUserStore()

// 登录
await userStore.login({ username: 'admin', password: '123456' })

// 获取用户信息
await userStore.getInfo()

// 判断是否登录
if (userStore.token) { ... }

// 判断是否有权限
if (userStore.permissions.includes('system:user:list')) { ... }

// 退出登录
userStore.clear()

usePermissionStore

const permissionStore = usePermissionStore()

// 获取菜单
const menus = permissionStore.menus

// 获取路由
const routes = permissionStore.routes

// 生成动态路由
await permissionStore.generateRoutes()

useAppStore

const appStore = useAppStore()

// 侧边栏折叠
appStore.toggleSidebar()

// 主题切换
appStore.toggleTheme()

状态持久化

Token 等需要持久化的状态使用 localStorage：

// 存储
localStorage.setItem('token', token)

// 读取
const token = localStorage.getItem('token') || ''

组合式函数中使用

import { useUserStore } from '@/stores/user'

export function usePermission() {
  const userStore = useUserStore()

  const hasPermission = (perm: string) => {
    return userStore.permissions.includes(perm)
  }

  return { hasPermission }
}

组件中使用

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 响应式引用
const nickname = computed(() => userStore.userInfo?.nickname || '')
</script>

<template>
  <div>{{ nickname }}</div>
</template>

注意事项

• Store 使用组合式 API 定义（defineStore + setup 函数）
• 不要在 Store 中直接操作 API，API 调用放在 Store 方法内部
• 持久化只存必要状态（如 Token），不存所有状态
• Store 是单例的，在任意组件中 useUserStore() 返回同一实例