229 lines
4.8 KiB
Markdown
229 lines
4.8 KiB
Markdown
# 网站信息和统计数据状态管理使用指南
|
||
|
||
## 概述
|
||
|
||
项目已经实现了网站信息和统计数据的状态管理，使用 Pinia 进行状态管理，避免了在多个组件中重复调用 API。
|
||
|
||
## Store 结构
|
||
|
||
### 1. 网站信息 Store (`useSiteStore`)
|
||
|
||
位置：`src/store/modules/site.ts`
|
||
|
||
**功能：**
|
||
- 缓存网站基本信息（名称、Logo、域名等）
|
||
- 自动计算系统运行天数
|
||
- 智能缓存管理（默认30分钟有效期）
|
||
- 自动更新 localStorage 中的相关信息
|
||
|
||
**主要 API：**
|
||
```typescript
|
||
const siteStore = useSiteStore();
|
||
|
||
// 获取网站信息（带缓存）
|
||
await siteStore.fetchSiteInfo();
|
||
|
||
// 强制刷新
|
||
await siteStore.fetchSiteInfo(true);
|
||
|
||
// 获取计算属性
|
||
siteStore.websiteName
|
||
siteStore.websiteLogo
|
||
siteStore.runDays
|
||
```
|
||
|
||
### 2. 统计数据 Store (`useStatisticsStore`)
|
||
|
||
位置：`src/store/modules/statistics.ts`
|
||
|
||
**功能：**
|
||
- 缓存统计数据（用户数、订单数、销售额等）
|
||
- 自动刷新机制（默认5分钟间隔）
|
||
- 异步更新数据库
|
||
- 短期缓存策略
|
||
|
||
**主要 API：**
|
||
```typescript
|
||
const statisticsStore = useStatisticsStore();
|
||
|
||
// 获取统计数据
|
||
await statisticsStore.fetchStatistics();
|
||
|
||
// 开始自动刷新（5分钟间隔）
|
||
statisticsStore.startAutoRefresh();
|
||
|
||
// 停止自动刷新
|
||
statisticsStore.stopAutoRefresh();
|
||
|
||
// 获取统计数据
|
||
statisticsStore.userCount
|
||
statisticsStore.orderCount
|
||
statisticsStore.totalSales
|
||
```
|
||
|
||
## 使用方式
|
||
|
||
### 方式一：直接使用 Store
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<h1>{{ siteStore.websiteName }}</h1>
|
||
<img :src="siteStore.websiteLogo" alt="logo" />
|
||
<p>用户总数: {{ statisticsStore.userCount }}</p>
|
||
<p>运行天数: {{ siteStore.runDays }}</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useSiteStore } from '@/store/modules/site';
|
||
import { useStatisticsStore } from '@/store/modules/statistics';
|
||
import { onMounted, onUnmounted } from 'vue';
|
||
|
||
const siteStore = useSiteStore();
|
||
const statisticsStore = useStatisticsStore();
|
||
|
||
onMounted(async () => {
|
||
// 加载数据
|
||
await Promise.all([
|
||
siteStore.fetchSiteInfo(),
|
||
statisticsStore.fetchStatistics()
|
||
]);
|
||
|
||
// 开始自动刷新统计数据
|
||
statisticsStore.startAutoRefresh();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 停止自动刷新
|
||
statisticsStore.stopAutoRefresh();
|
||
});
|
||
</script>
|
||
```
|
||
|
||
### 方式二：使用组合式函数（推荐）
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<h1>{{ websiteName }}</h1>
|
||
<img :src="websiteLogo" alt="logo" />
|
||
<p>用户总数: {{ userCount }}</p>
|
||
<p>运行天数: {{ runDays }}</p>
|
||
<a-spin :spinning="loading">
|
||
<!-- 内容 -->
|
||
</a-spin>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useSiteData } from '@/composables/useSiteData';
|
||
import { onMounted, onUnmounted } from 'vue';
|
||
|
||
const {
|
||
websiteName,
|
||
websiteLogo,
|
||
userCount,
|
||
runDays,
|
||
loading,
|
||
refreshAll,
|
||
startAutoRefresh,
|
||
stopAutoRefresh
|
||
} = useSiteData();
|
||
|
||
onMounted(async () => {
|
||
await refreshAll();
|
||
startAutoRefresh();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
stopAutoRefresh();
|
||
});
|
||
</script>
|
||
```
|
||
|
||
## 缓存策略
|
||
|
||
### 网站信息缓存
|
||
- **有效期：** 30分钟
|
||
- **策略：** 长期缓存，信息相对稳定
|
||
- **刷新时机：** 手动刷新或缓存过期
|
||
|
||
### 统计数据缓存
|
||
- **有效期：** 5分钟
|
||
- **策略：** 短期缓存 + 自动刷新
|
||
- **刷新时机：** 自动刷新（5分钟间隔）或手动刷新
|
||
|
||
## 最佳实践
|
||
|
||
### 1. 组件生命周期管理
|
||
```typescript
|
||
onMounted(async () => {
|
||
// 加载数据
|
||
await refreshAll();
|
||
// 开始自动刷新
|
||
startAutoRefresh();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 清理定时器
|
||
stopAutoRefresh();
|
||
});
|
||
```
|
||
|
||
### 2. 错误处理
|
||
```typescript
|
||
try {
|
||
await siteStore.fetchSiteInfo();
|
||
} catch (error) {
|
||
console.error('获取网站信息失败:', error);
|
||
// 处理错误
|
||
}
|
||
```
|
||
|
||
### 3. 强制刷新
|
||
```typescript
|
||
// 用户手动刷新时
|
||
const handleRefresh = async () => {
|
||
await refreshAll(true); // 强制刷新
|
||
};
|
||
```
|
||
|
||
## 迁移指南
|
||
|
||
### 从直接 API 调用迁移
|
||
|
||
**之前：**
|
||
```typescript
|
||
import { getSiteInfo } from '@/api/layout';
|
||
|
||
const siteInfo = ref({});
|
||
const loadSiteInfo = async () => {
|
||
siteInfo.value = await getSiteInfo();
|
||
};
|
||
```
|
||
|
||
**现在：**
|
||
```typescript
|
||
import { useSiteStore } from '@/store/modules/site';
|
||
|
||
const siteStore = useSiteStore();
|
||
// 直接使用 siteStore.siteInfo 或 siteStore.websiteName 等
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **自动刷新管理：** 确保在组件卸载时停止自动刷新，避免内存泄漏
|
||
2. **缓存有效性：** 可以通过 `isCacheValid` 检查缓存是否有效
|
||
3. **错误处理：** 所有异步操作都应该有适当的错误处理
|
||
4. **性能优化：** 使用计算属性而不是直接访问 store 状态
|
||
|
||
## 扩展功能
|
||
|
||
如需添加新的统计数据或网站信息字段，请：
|
||
|
||
1. 更新对应的 Store 接口
|
||
2. 添加相应的 getter
|
||
3. 更新组合式函数
|
||
4. 更新类型定义
|