状态管理

vue3-element-admin 使用 Pinia 进行状态管理。

Pinia 介绍

Pinia 是 Vue 3 官方推荐的状态管理库，相比 Vuex 更加轻量和类型友好。

Store 目录结构

store/
├── index.ts           # Store 入口
└── modules/           # Store 模块
    ├── user.ts        # 用户信息
    ├── permission.ts  # 权限信息
    ├── settings.ts    # 系统设置
    ├── tagsView.ts    # 标签页
    └── ...

创建 Store

// store/modules/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  // 状态
  const token = ref('')
  const userInfo = ref<UserInfo>()
  const roles = ref<string[]>([])

  // 计算属性
  const username = computed(() => userInfo.value?.username || '')

  // 方法
  async function login(data: LoginForm) {
    const res = await AuthAPI.login(data)
    token.value = res.data.token
    setToken(res.data.token)
  }

  async function getUserInfo() {
    const res = await UserAPI.getUserInfo()
    userInfo.value = res.data
    roles.value = res.data.roles
  }

  function logout() {
    token.value = ''
    removeToken()
    router.push('/login')
  }

  return {
    token,
    userInfo,
    roles,
    username,
    login,
    getUserInfo,
    logout
  }
})

使用 Store

在组件中使用

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

const userStore = useUserStore()

// 访问状态
console.log(userStore.username)

// 调用方法
function handleLogin() {
  userStore.login({ username: 'admin', password: '123456' })
}

// 响应式解构
const { username, roles } = storeToRefs(userStore)
</script>

在 Pinia 外使用

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

// 需要在 setup 之外使用
export function checkAuth() {
  const userStore = useUserStore()
  return userStore.token !== ''
}

Store 持久化

项目使用 pinia-plugin-persistedstate 实现持久化：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default pinia

配置持久化：

export const useUserStore = defineStore('user', () => {
  // ...
}, {
  persist: {
    key: 'user-store',
    storage: localStorage,
    paths: ['token', 'userInfo']
  }
})

常用 Store

useUserStore

用户信息管理：

• 登录/退出
• 获取用户信息
• Token 管理

usePermissionStore

权限管理：

• 生成动态路由
• 权限判断

useSettingsStore

系统设置：

• 主题配置
• 布局配置
• 语言配置

useTagsViewStore

标签页管理：

• 添加/删除标签
• 固定标签
• 关闭其他标签

相关链接

• Pinia 官方文档
• 权限控制
• 路由和菜单