mp-vue/docs/bszx-统计数据状态管理修复总结.md

百色中学统计数据状态管理修复总结

问题背景

在 src/views/bszx/dashboard/index.vue 中，getTotalBszxPrice 函数存在以下问题：

1. 异步函数在计算属性中使用错误：

   const totalBszxPrice = computed(() => getTotalBszxPrice()); // ❌ 返回 Promise 而不是数值
   

2. TypeScript 类型错误：IDE 提示 "Object is possibly undefined"

3. 数据不统一：totalPriceAmount 在多个组件中重复计算和传递

解决方案

1. 创建专门的百色中学统计数据 Store

文件位置：src/store/modules/bszx-statistics.ts

核心功能：

• 统一管理百色中学相关的统计数据
• 智能缓存机制（5分钟有效期）
• 自动刷新功能
• 完整的类型保护和错误处理

主要特性：

export const useBszxStatisticsStore = defineStore({
  id: 'bszx-statistics',
  state: (): BszxStatisticsState => ({
    totalPrice: 0,
    loading: false,
    lastUpdateTime: null,
    cacheExpiry: 5 * 60 * 1000, // 5分钟缓存
    refreshTimer: null
  }),
  
  getters: {
    bszxTotalPrice: (state): number => safeNumber(state.totalPrice)
  },
  
  actions: {
    async fetchBszxStatistics(forceRefresh = false),
    startAutoRefresh(interval = 5 * 60 * 1000),
    stopAutoRefresh()
  }
});

2. 修复 Dashboard 页面

修复前：

// ❌ 错误的实现
const totalBszxPrice = computed(() => getTotalBszxPrice());
const getTotalBszxPrice = async () => {
  return await bszxOrderTotal()
}

修复后：

// ✅ 正确的实现
const bszxStatisticsStore = useBszxStatisticsStore();
const totalBszxPrice = computed(() => bszxStatisticsStore.bszxTotalPrice);

onMounted(async () => {
  await Promise.all([
    siteStore.fetchSiteInfo(),
    statisticsStore.fetchStatistics(),
    bszxStatisticsStore.fetchBszxStatistics() // 加载百色中学统计数据
  ]);
  
  statisticsStore.startAutoRefresh();
  bszxStatisticsStore.startAutoRefresh(); // 开始自动刷新
});

3. 统一 totalPriceAmount 的使用

涉及的文件：

• src/views/bszx/bszxPayRanking/index.vue
• src/views/bszx/bszxPayRanking/components/search.vue
• src/views/bsyx/bsyxPayRanking/index.vue
• src/views/bsyx/bsyxPayRanking/components/search.vue

修复策略：

1. Search 组件：直接从 store 获取数据

   // 使用百色中学统计数据 store
   const bszxStatisticsStore = useBszxStatisticsStore();
   const bszxTotalPrice = computed(() => bszxStatisticsStore.bszxTotalPrice);
   

2. 主组件：更新 store 数据而不是本地变量

   const datasource: DatasourceFunction = ({where}) => {
     return ranking({...where}).then(data => {
       // 计算总金额并更新到 store
       let totalPrice = 0;
       data.forEach((item) => {
         if (item.totalPrice) {
           totalPrice += item.totalPrice;
         }
       });
   
       // 更新 store 中的数据
       bszxStatisticsStore.updateStatistics({ totalPrice });
   
       return data;
     });
   };
   

核心改进

1. 类型安全

• 使用 safeNumber 工具函数确保数据类型安全
• 完整的 TypeScript 类型定义
• 运行时类型检查

2. 数据一致性

• 统一的数据源（store）
• 避免重复计算和传递
• 自动同步更新

3. 性能优化

• 智能缓存机制（5分钟有效期）
• 自动刷新功能
• 避免不必要的 API 调用

4. 错误处理

• 完善的错误捕获和处理
• 优雅的降级策略
• 详细的错误日志

使用方式

在组件中使用

import { useBszxStatisticsStore } from '@/store/modules/bszx-statistics';

const bszxStatisticsStore = useBszxStatisticsStore();

// 获取总金额
const totalPrice = computed(() => bszxStatisticsStore.bszxTotalPrice);

// 初始化数据
onMounted(async () => {
  await bszxStatisticsStore.fetchBszxStatistics();
  bszxStatisticsStore.startAutoRefresh(); // 开始自动刷新
});

// 清理资源
onUnmounted(() => {
  bszxStatisticsStore.stopAutoRefresh();
});

API 方法

// 获取统计数据（带缓存）
await bszxStatisticsStore.fetchBszxStatistics();

// 强制刷新
await bszxStatisticsStore.fetchBszxStatistics(true);

// 更新数据
bszxStatisticsStore.updateStatistics({ totalPrice: 1000 });

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

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

// 清除缓存
bszxStatisticsStore.clearCache();

验证结果

✅ TypeScript 编译通过 - 无类型错误
✅ 生产构建成功 - 无运行时错误
✅ 数据统一管理 - 避免重复计算
✅ 类型安全 - 完整的类型保护
✅ 性能优化 - 智能缓存和自动刷新

最佳实践

1. 生命周期管理：

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

2. 错误处理：

   try {
     await bszxStatisticsStore.fetchBszxStatistics();
   } catch (error) {
     console.error('获取统计数据失败:', error);
   }
   

3. 强制刷新：

   const handleRefresh = () => bszxStatisticsStore.fetchBszxStatistics(true);
   

总结

通过创建专门的 bszx-statistics store，我们成功解决了：

1. 异步函数在计算属性中的错误使用
2. TypeScript 类型安全问题
3. 数据重复计算和传递问题
4. 缺乏统一的数据管理

这个实现提供了更好的类型安全性、数据一致性和性能优化，为百色中学相关功能提供了可靠的数据支撑。