dromara/plus-ui状态管理Pinia应用

dromara/plus-ui状态管理Pinia应用

【免费下载链接】plus-ui RuoYi-Vue-Plus 5.X 与 RuoYi-Cloud-Plus 2.X 统一 UI 前端代码仓库 问题请到主框架反馈 项目地址: https://gitcode.com/dromara/plus-ui

引言：为什么选择Pinia？

在现代前端开发中，状态管理是构建复杂应用的核心挑战。dromara/plus-ui作为RuoYi-Vue-Plus和RuoYi-Cloud-Plus的统一UI前端，选择了Pinia作为其状态管理解决方案。Pinia作为Vue.js的官方推荐状态管理库，相比Vuex具有更简洁的API、更好的TypeScript支持以及更优秀的开发体验。

本文将深入探讨dromara/plus-ui中Pinia的应用实践，从基础概念到高级用法，为您全面解析这一现代化状态管理方案。

Pinia核心概念解析

1. Store（存储）定义

在dromara/plus-ui中，Store使用Composition API风格定义：

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  const token = ref(getToken());
  const name = ref('');
  const roles = ref<Array<string>>([]);
  
  const login = async (userInfo: LoginData): Promise<void> => {
    // 登录逻辑
  };
  
  return { token, name, roles, login };
});

2. 响应式状态管理

Pinia基于Vue 3的响应式系统，提供了自动的类型推导和IDE支持：

// 在组件中使用
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
const userName = computed(() => userStore.name); // 自动响应式

dromara/plus-ui中的Store模块架构

模块化设计

项目采用模块化的Store设计，每个功能域都有独立的Store：

模块名称	功能描述	核心状态
user	用户信息管理	token、roles、permissions
app	应用配置	sidebar状态、设备类型、语言
settings	系统设置	主题、布局、动画配置
permission	权限管理	路由权限、菜单权限
tagsView	标签页管理	访问视图、缓存页面
dict	数据字典	字典数据缓存
notice	通知管理	消息通知状态

状态管理流程图

核心Store实现详解

1. 用户Store（user.ts）

用户Store负责管理用户认证状态和信息：

export const useUserStore = defineStore('user', () => {
  const token = ref(getToken());
  const name = ref('');
  const nickname = ref('');
  const userId = ref<string | number>('');
  const avatar = ref('');
  const roles = ref<Array<string>>([]);
  const permissions = ref<Array<string>>([]);

  // 登录操作
  const login = async (userInfo: LoginData): Promise<void> => {
    const [err, res] = await to(loginApi(userInfo));
    if (res) {
      const data = res.data;
      setToken(data.access_token);
      token.value = data.access_token;
      return Promise.resolve();
    }
    return Promise.reject(err);
  };

  // 获取用户信息
  const getInfo = async (): Promise<void> => {
    const [err, res] = await to(getUserInfo());
    if (res) {
      const data = res.data;
      const user = data.user;
      // 处理用户信息...
    }
    return Promise.reject(err);
  };

  return { userId, token, name, roles, permissions, login, getInfo };
});

2. 应用Store（app.ts）

应用Store管理UI状态和配置：

export const useAppStore = defineStore('app', () => {
  const sidebarStatus = useStorage('sidebarStatus', '1');
  const sidebar = reactive({
    opened: sidebarStatus.value ? !!+sidebarStatus.value : true,
    withoutAnimation: false,
    hide: false
  });
  
  const device = ref<string>('desktop');
  const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
  const language = useStorage('language', 'zh_CN');

  // 切换侧边栏
  const toggleSideBar = (withoutAnimation: boolean) => {
    if (sidebar.hide) return false;
    sidebar.opened = !sidebar.opened;
    sidebar.withoutAnimation = withoutAnimation;
    sidebarStatus.value = sidebar.opened ? '1' : '0';
  };

  return { device, sidebar, language, size, toggleSideBar };
});

高级用法与最佳实践

1. 持久化存储

dromara/plus-ui使用@vueuse/core的useStorage实现状态持久化：

import { useStorage } from '@vueuse/core';

const language = useStorage('language', 'zh_CN');
const size = useStorage<'large' | 'default' | 'small'>('size', 'default');

2. 类型安全

充分利用TypeScript的类型系统：

// 定义明确的类型
interface UserState {
  token: string;
  name: string;
  roles: string[];
  permissions: string[];
}

// 在组件中使用类型推断
const userStore = useUserStore();
userStore.roles // 自动推断为 string[]

3. 组合式Store使用

在复杂场景下组合多个Store：

import { useUserStore } from '@/store/modules/user';
import { useAppStore } from '@/store/modules/app';
import { usePermissionStore } from '@/store/modules/permission';

export const useGlobalStore = () => {
  const userStore = useUserStore();
  const appStore = useAppStore();
  const permissionStore = usePermissionStore();

  const isAdmin = computed(() => userStore.roles.includes('admin'));
  const currentLanguage = computed(() => appStore.language);
  const hasPermission = computed(() => permissionStore.hasPermission('some:permission'));

  return { isAdmin, currentLanguage, hasPermission };
};

性能优化策略

1. 选择性响应式

避免不必要的响应式更新：

// 使用storeToRefs解构，保持响应式
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const { name, roles } = storeToRefs(userStore); // 保持响应式

// 对于方法，直接解构即可
const { login, logout } = userStore; // 方法不需要响应式

2. 计算属性缓存

利用计算属性优化性能：

const userStore = useUserStore();

// 使用计算属性缓存派生状态
const userInfo = computed(() => ({
  name: userStore.name,
  roles: userStore.roles,
  isAdmin: userStore.roles.includes('admin')
}));

3. 批量更新优化

减少不必要的渲染：

// 使用patch方法批量更新
userStore.$patch({
  name: 'newName',
  roles: ['admin', 'user']
});

// 或者使用函数形式
userStore.$patch((state) => {
  state.name = 'newName';
  state.roles.push('admin');
});

错误处理与调试

1. 异步操作错误处理

使用await-to-js处理异步错误：

import { to } from 'await-to-js';

const login = async (userInfo: LoginData): Promise<void> => {
  const [err, res] = await to(loginApi(userInfo));
  if (err) {
    // 统一错误处理
    throw new Error('登录失败');
  }
  // 处理成功结果
};

2. 开发调试工具

利用Pinia DevTools进行状态调试：

// 在开发环境中启用严格模式
const store = createPinia();

if (import.meta.env.DEV) {
  store.use(({ store }) => {
    // 开发时调试钩子
    console.log('Store created:', store.$id);
  });
}

实战案例：权限管理系统

权限状态管理序列图

代码实现

// 权限检查工具函数
export const hasPermission = (permission: string): boolean => {
  const userStore = useUserStore();
  const permissions = userStore.permissions;
  return permissions.includes(permission);
};

// 在组件中使用
const canEdit = computed(() => hasPermission('system:user:edit'));

总结与展望

dromara/plus-ui通过Pinia实现了现代化、类型安全的状态管理方案，具有以下优势：

1. 简洁API：相比Vuex更简洁直观的API设计
2. TypeScript支持：完整的类型推导和IDE支持
3. 模块化架构：清晰的业务边界和职责分离
4. 性能优化：智能的响应式更新和计算属性缓存
5. 开发体验：优秀的调试工具和开发体验

随着Vue 3生态的不断发展，Pinia将继续作为dromara/plus-ui的核心状态管理方案，为开发者提供更加高效、可靠的开发体验。

---

最佳实践提示：

• 始终使用TypeScript获得更好的类型安全
• 合理划分Store模块，避免上帝Store
• 利用计算属性优化派生状态
• 使用storeToRefs保持响应式解构
• 在适当的时候使用持久化存储

通过遵循这些最佳实践，您可以在dromara/plus-ui项目中构建出高效、可维护的状态管理系统。

【免费下载链接】plus-ui RuoYi-Vue-Plus 5.X 与 RuoYi-Cloud-Plus 2.X 统一 UI 前端代码仓库 问题请到主框架反馈 项目地址: https://gitcode.com/dromara/plus-ui