bun + vite7 的结合，孕育的 Robot Admin 【靓仔出道】（十）

兮漫天
59 阅读6分钟

Robot Admin 状态管理系统详解

等级：进阶 | 阅读时间：8分钟

状态管理是Robot Admin应用程序的一个关键方面，提供了一种集中处理应用程序数据、用户信息、权限和UI偏好的方式。该项目使用Pinia（Vue推荐的状态管理库）来创建一个可维护且类型安全的状态管理系统。

状态管理架构概述

应用程序将状态组织成模块化的存储库，每个存储库负责特定的领域：

存储库目的关键特性
app应用程序UI状态标签/选项卡导航，活动路由跟踪
user认证与用户数据令牌管理，用户资料，登录/登出流程
permission授权菜单权限，按钮访问权限
themeUI偏好明/暗模式，主题定制

存储库设置

存储库系统通过一个专用插件在应用程序中初始化：

import { createPinia } from 'pinia'
import type { App } from 'vue'
 
export function setupStore(app: App) {
  const pinia = createPinia()
  app.use(pinia)
}

该函数在应用程序初始化时被调用，以创建和注册Pinia存储库实例。

存储库实现模式

项目使用两种不同的风格来定义存储库：

1. 选项API风格

大多数存储库使用传统的选项API模式，包含state、getters和actions：

export const s_userStore = defineStore('user', {
  state: () => ({
    token: getItem<string>(TOKEN) ?? '',
    userInfo: {} as UserInfo,
  }),
  
  getters: {
    hasUserInfo: state => Object.keys(state.userInfo).length > 0,
  },
  
  actions: {
    setToken(token: string) {
      this.token = token
      setItem(TOKEN, token)
    },
    // 更多操作...
  },
})

2. 组合API风格

主题存储库使用组合API风格，采用setup类似的语法：

export const useThemeStore = defineStore('theme', () => {
  // 状态作为refs
  const mode = ref<ThemeMode>(savedMode || 'system')
  const systemIsDark = ref(mediaQuery.matches)
  
  // 计算属性作为getters
  const isDark = computed(() => {
    return (
      mode.value === 'dark' || (mode.value === 'system' && systemIsDark.value)
    )
  })
  
  // 方法作为actions
  const setMode = async (newMode: ThemeMode) => {
    // 实现...
  }
  
  return {
    // 暴露状态、getters和actions
    mode,
    isDark,
    setMode,
    // 更多属性...
  }
})

关键存储库及其使用

应用程序存储库

应用程序存储库管理UI相关的状态，特别是标签导航系统：

// 使用示例
import { s_appStore } from '@/stores/app'
 
// 在组件中
const appStore = s_appStore()
 
// 添加新的导航标签
appStore.addTag({
  path: '/dashboard',
  title: '仪表盘',
  icon: 'dashboard',
  meta: { affix: false },
})
 
// 移除标签
appStore.removeTag(1)

应用程序存储库包括管理导航标签的方法，确保当前路由在标签列表中有所体现，并设置活动标签。

用户存储库

用户存储库处理认证状态和用户资料数据：

// 使用示例
import { s_userStore } from '@/stores/user'
 
// 在组件或服务中
const userStore = s_userStore()
 
// 检查用户是否已登录
const isLoggedIn = !!userStore.token
 
// 处理登录成功
userStore.handleLoginSuccess(tokenFromAPI)
 
// 访问用户信息
const { userInfo } = storeToRefs(userStore)

用户存储库提供以下方法：

  • 设置和检索认证令牌
  • 管理用户资料信息
  • 处理登录成功和失败
  • 执行登出操作并进行适当的清理

权限存储库

权限存储库管理授权和访问控制：

// 使用示例
import { s_permissionStore } from '@/stores/permission'
 
// 在组件或服务中
const permStore = s_permissionStore()
 
// 获取授权菜单列表
await permStore.getAuthMenuList()
 
// 访问菜单以进行渲染
const menuList = computed(() => permStore.showMenuListGet)
 
// 检查页面是否应使用keep-alive
const keepAliveRoutes = computed(() => permStore.keepAliveRouterGet)

该存储库提供：

  • 访问从后端API检索的授权菜单
  • 按钮级权限（已注释但为未来实现准备）
  • 用于渲染就绪菜单列表的计算属性
  • 确定哪些路由应使用Vue的keep-alive功能的逻辑

主题存储库

主题存储库使用组合API风格管理UI主题偏好：

// 使用示例
import { useThemeStore } from '@/stores/theme'
 
// 在组件中
const themeStore = useThemeStore()
 
// 切换明暗模式
const toggleDarkMode = () => {
  themeStore.setMode(themeStore.isDark ? 'light' : 'dark')
}
 
// 更新主题颜色
themeStore.updateThemeOverrides({
  common: {
    primaryColor: '#1890ff'
  }
})

该存储库提供：

  • 主题模式管理（明、暗、系统）
  • 系统主题检测和同步
  • NaiveUI组件的自定义主题覆盖
  • 主题变化间的平滑过渡
  • 主题偏好的本地存储持久化

存储库持久化

项目为某些存储库实现了持久化策略：

  • 令牌持久化 - 用户的认证令牌存储在localStorage中
  • 主题偏好 - 主题模式和自定义覆盖保存到localStorage
  • 应用程序状态持久化 - 应用程序存储库使用Pinia的内置持久化选项
// 来自用户存储库的示例
setToken(token: string) {
  this.token = token
  setItem(TOKEN, token)
}

存储库重置和清理

存储库实现了适当的重置功能，用于在登出等操作中进行清理：

// 来自用户存储库登出操作的示例
async logout() {
  // 清除用户状态
  this.token = ''
  this.userInfo = {}
  
  // 重置文档标题
  document.title = import.meta.env.VITE_APP_TITLE
  
  // 清除存储并重置其他存储库
  removeAllItem()
  s_appStore().$reset()
  
  // 清除动态路由并导航到登录页
  const { clearExistingRoutes } = await import('@/router/dynamicRouter')
  clearExistingRoutes()
  router.replace('/login')
}

这确保了在用户登出时，所有应用程序状态都得到了适当的清理。

与其他系统的集成

存储库与应用程序中的多个其他系统集成：

  • 路由集成 - 用户和权限等存储库与路由进行导航和路由配置
  • 本地存储 - 多个存储库使用本地存储进行持久化
  • API服务 - 权限存储库从后端API获取菜单数据
  • UI组件 - 主题存储库配置NaiveUI主题

在组件中使用存储库

在Vue组件中使用存储库：

<script setup>
import { s_userStore } from '@/stores/user'
import { s_permissionStore } from '@/stores/permission'
import { storeToRefs } from 'pinia'
 
// 获取存储库实例
const userStore = s_userStore()
const permStore = s_permissionStore()
 
// 使用storeToRefs解构以保持响应性
const { token, userInfo } = storeToRefs(userStore)
const { showMenuListGet } = storeToRefs(permStore)
 
// 直接使用操作
const handleLogout = () => userStore.logout()
</script>

注意： 记住在解构状态属性时使用storeToRefs以保持响应性。

状态管理流程

image.png

状态管理系统的数据流程如下：

  1. 组件派发 - 组件调用store中的action
  2. API调用 - action可能调用后端API获取数据
  3. 状态变异 - 更新store中的state
  4. 响应式更新 - 组件自动响应状态变化
  5. 状态持久化 - 关键状态保存到localStorage
  6. 状态恢复 - 应用启动时从localStorage恢复状态

这个流程确保了数据在整个应用程序中的一致性和可预测性。

最佳实践

  1. 模块化设计：将不同功能域的状态分离到不同的store中
  2. 类型安全：使用TypeScript确保状态的类型安全
  3. 响应式解构：使用storeToRefs保持响应性
  4. 适当持久化：只持久化必要的状态数据
  5. 清理机制：实现适当的状态重置和清理逻辑

总结

Robot Admin的状态管理系统基于Pinia构建，提供了完整的状态管理解决方案。通过模块化的设计、类型安全的实现和完善的持久化机制，该系统为构建大型Vue应用提供了坚实的基础。无论是用户认证、权限控制还是主题管理，都能通过这套状态管理系统得到有效的处理。

相关资源：

 期待共建！

如果这套组件系统对你的开发工作有所启发或帮助，请不要吝啬你的 Star！每一个 ⭐ 都是对我最大的鼓励和支持。

👉 点击这里 Star 支持项目 （🧧行大运摸大票💰）

🔗 探索更多资源

📋 资源类型🔗 链接📝 说明
🎯 在线预览robotadmin.cn体验完整功能演示
📚 详细文档tzagileteam.com深入了解实现细节
💻 源码仓库https:/github.com/ChenyCHENYU/Robot_Admin获取完整源代码
avatar
文章
阅读
粉丝