gxwebsoft/mp-vue

Fork 0

Files

赵忠林 6f4ff3f8fb 优化：getSiteInfo、statistics使用了状态管理模式，提升性能。

2025-07-31 11:08:08 +08:00

5.0 KiB

Raw Blame History

网站信息和统计数据状态管理实现总结

问题背景

原项目中 getSiteInfo 和 loadStatistics 方法在多个组件中重复调用，存在以下问题：

重复请求：每个组件都独立调用 API，造成不必要的网络请求
数据不一致：各组件间数据可能不同步
类型安全问题：TypeScript 提示 "Object is possibly undefined" 错误
维护困难：相同逻辑分散在多个组件中

解决方案

1. 创建状态管理 Store

网站信息 Store (`src/store/modules/site.ts`)

功能：管理网站基本信息（名称、Logo、域名等）
缓存策略：30分钟有效期，适合相对稳定的数据
特性：
- 智能缓存管理
- 自动计算系统运行天数
- 自动更新 localStorage
- 完整的类型保护

统计数据 Store (`src/store/modules/statistics.ts`)

功能：管理统计数据（用户数、订单数、销售额等）
缓存策略：5分钟有效期，支持自动刷新
特性：
- 短期缓存 + 自动刷新机制
- 异步更新数据库
- 类型安全的数据处理
- 错误处理和重试机制

2. 类型保护工具 (`src/utils/type-guards.ts`)

创建了一套完整的类型保护工具函数：

// 安全获取数字值
safeNumber(value: unknown, defaultValue = 0): number

// 检查对象是否有有效的 ID
hasValidId(obj: unknown): obj is { id: number }

// 检查 API 响应是否有效
isValidApiResponse<T>(response: unknown): response is { count: number; list?: T[] }

3. 组合式函数 (`src/composables/useSiteData.ts`)

提供统一的数据访问接口：

const {
  websiteName,
  websiteLogo,
  userCount,
  orderCount,
  loading,
  refreshAll,
  startAutoRefresh,
  stopAutoRefresh
} = useSiteData();

核心特性

1. 智能缓存管理

网站信息：30分钟缓存，适合稳定数据
统计数据：5分钟缓存，支持实时更新
缓存验证：自动检查缓存有效性

2. 自动刷新机制

// 开始自动刷新（默认5分钟间隔）
statisticsStore.startAutoRefresh();

// 停止自动刷新
statisticsStore.stopAutoRefresh();

3. 类型安全

完整的 TypeScript 类型定义
运行时类型检查
安全的数据访问方法

4. 错误处理

API 调用失败处理
数据验证和默认值
详细的错误日志

使用方式

方式一：直接使用 Store

<script setup>
import { useSiteStore } from '@/store/modules/site';
import { useStatisticsStore } from '@/store/modules/statistics';

const siteStore = useSiteStore();
const statisticsStore = useStatisticsStore();

onMounted(async () => {
  await Promise.all([
    siteStore.fetchSiteInfo(),
    statisticsStore.fetchStatistics()
  ]);
  
  statisticsStore.startAutoRefresh();
});
</script>

方式二：使用组合式函数（推荐）

<script setup>
import { useSiteData } from '@/composables/useSiteData';

const {
  websiteName,
  userCount,
  loading,
  refreshAll,
  startAutoRefresh,
  stopAutoRefresh
} = useSiteData();

onMounted(async () => {
  await refreshAll();
  startAutoRefresh();
});

onUnmounted(() => {
  stopAutoRefresh();
});
</script>

已更新的组件

src/views/cms/dashboard/index.vue - 仪表板页面
src/layout/components/header-tools.vue - 头部工具栏
src/views/cms/setting/index.vue - 设置页面
src/views/shop/index.vue - 商店页面

数据更新策略

性能优化

减少 API 调用：智能缓存避免重复请求
内存优化：及时清理定时器和监听器
类型优化：编译时类型检查，减少运行时错误
按需加载：只在需要时获取数据

最佳实践

生命周期管理：

onMounted(() => startAutoRefresh());
onUnmounted(() => stopAutoRefresh());

错误处理：

try {
  await fetchSiteInfo();
} catch (error) {
  console.error('获取网站信息失败:', error);
}

强制刷新：

const handleRefresh = () => refreshAll(true);

构建验证

✅ TypeScript 编译通过
✅ 所有类型错误已解决
✅ 生产构建成功
✅ 无运行时错误

总结

通过实现状态管理，我们成功解决了：

重复 API 调用问题 - 智能缓存机制
类型安全问题 - 完整的类型保护
数据一致性问题 - 统一的数据源
维护性问题 - 集中的状态管理

这个实现为项目提供了更好的性能、更强的类型安全性和更易维护的代码结构。

5.0 KiB Raw Blame History Unescape Escape