# 设备状态管理 (Device Store) 使用指南

## 概述

为了避免在不同模块中重复请求设备数据，我们将设备信息集中管理在全局状态中。这样可以：

- ✅ **提高性能**：避免重复的网络请求
- ✅ **数据一致性**：所有模块共享同一份设备数据
- ✅ **实时更新**：设备状态变更时，所有相关UI自动更新
- ✅ **缓存机制**：智能缓存，5分钟内不重复请求
- ✅ **简化代码**：统一的设备操作API

## 核心功能

### 1. 设备状态管理

```typescript
// 设备状态类型
export type DeviceState = {
	devices: Array<DeviceInfo>        // 设备列表
	currentDevice: DeviceInfo | null  // 当前选中设备
	isLoading: boolean               // 加载状态
	lastUpdated: number | null       // 最后更新时间
}
```

### 2. 主要API方法

#### 获取设备信息
```typescript
const deviceStore = getDeviceStore()

// 获取所有设备
const devices = deviceStore.getDevices()

// 获取当前设备
const currentDevice = deviceStore.getCurrentDevice()

// 根据ID获取设备
const device = deviceStore.getDeviceById('device_id')

// 获取在线设备
const onlineDevices = deviceStore.getOnlineDevices()
```

#### 设备操作
```typescript
// 加载设备列表（带缓存，不强制刷新）
await deviceStore.refreshDevices()

// 强制刷新设备列表（忽略缓存）
await deviceStore.loadDevices(true)

// 绑定新设备
const success = await deviceStore.bindDevice(deviceData)

// 解绑设备
const success = await deviceStore.unbindDevice(deviceId)

// 更新设备配置
const success = await deviceStore.updateDevice(deviceId, configData)

// 设置当前设备
deviceStore.setCurrentDevice(device)
```

#### 状态查询
```typescript
// 获取加载状态
const isLoading = deviceStore.isLoading()

// 获取最后更新时间
const lastUpdated = deviceStore.getLastUpdated()
```

## 在Vue组件中的使用

### 1. 基本使用

```vue
<template>
	<view>
		<!-- 显示设备列表 -->
		<view v-if="isLoading">加载中...</view>
		<view v-else>
			<view v-for="device in devices" :key="device.id">
				{{ device.device_name }}
			</view>
		</view>
	</view>
</template>

<script lang="uts">
import { computed, onMounted } from 'vue'
import { getDeviceStore } from '@/utils/store.uts'

export default {
	setup() {
		const deviceStore = getDeviceStore()
		
		// 响应式数据
		const devices = computed(() => deviceStore.getDevices())
		const isLoading = computed(() => deviceStore.isLoading())
		
		// 页面挂载时加载设备
		onMounted(async () => {
			await deviceStore.loadDevices()
		})
		
		return {
			devices,
			isLoading
		}
	}
}
</script>
```

### 2. 设备管理页面

```typescript
// 设备管理操作
const bindDevice = async (deviceData: UTSJSONObject) => {
	const success = await deviceStore.bindDevice(deviceData)
	if (success) {
		// 设备已自动添加到store，UI自动更新
		uni.showToast({ title: '绑定成功' })
	}
}

const unbindDevice = async (deviceId: string) => {
	const success = await deviceStore.unbindDevice(deviceId)
	if (success) {
		// 设备已自动从store移除，UI自动更新
		uni.showToast({ title: '解绑成功' })
	}
}
```

### 3. 跨页面设备状态共享

```typescript
// 页面A：选择设备
const selectDevice = (device: DeviceInfo) => {
	deviceStore.setCurrentDevice(device)
	uni.navigateTo({
		url: `/pages/sense/detail?device_id=${device.id}`
	})
}

// 页面B：使用选中的设备
const currentDevice = computed(() => deviceStore.getCurrentDevice())
// currentDevice 会自动包含页面A选择的设备信息
```

## 缓存机制

设备数据具有智能缓存机制：

- **自动缓存**：首次加载后，数据会被缓存5分钟
- **避免重复请求**：5分钟内的 `loadDevices()` 调用直接返回缓存数据
- **强制刷新**：使用 `loadDevices(true)` 可以强制从服务器重新获取
- **实时更新**：设备操作（绑定、解绑、更新）会实时更新缓存

## 文件结构

```
utils/
  store.uts                    # 主要的store文件，包含设备状态管理
  
pages/sense/
  devices.uvue                 # 设备管理页面，已更新使用store
  index.uvue                   # 传感器主页，已更新使用store
  detail.uvue                  # 设备详情页
  senseDataService.uts         # 设备数据服务
  deviceStoreExample.uts       # 使用示例和最佳实践
  insertExample.uts            # 插入操作示例
```

## 优势

### 性能优化
- ✅ 减少网络请求：避免重复的设备列表请求
- ✅ 智能缓存：5分钟内复用数据
- ✅ 按需更新：只在必要时刷新数据

### 开发体验
- ✅ 统一API：所有设备操作通过同一个接口
- ✅ 类型安全：完整的TypeScript类型支持
- ✅ 响应式：Vue的响应式系统自动更新UI
- ✅ 错误处理：统一的错误处理和用户反馈

### 数据一致性
- ✅ 单一数据源：所有模块共享同一份设备数据
- ✅ 实时同步：设备状态变更立即反映到所有页面
- ✅ 状态持久：页面间跳转不丢失设备状态

## 迁移指南

如果现有页面直接使用 `SenseDataService`：

### 原来的代码：
```typescript
// 旧方式：直接调用服务
const result = await SenseDataService.getDevicesByUser(userId)
if (result.success) {
	devices.value = result.data
}
```

### 更新后的代码：
```typescript
// 新方式：使用store
const deviceStore = getDeviceStore()
const devices = computed(() => deviceStore.getDevices())

onMounted(async () => {
	await deviceStore.refreshDevices() // 智能缓存加载
})

// 强制刷新（忽略缓存）
const forceRefresh = async () => {
	await deviceStore.loadDevices(true)
}
```

通过这种方式，设备状态管理变得更加高效和便于维护！

## API 参考

### 设备加载方法

由于UTS不支持匿名函数的默认参数，我们提供了两个加载方法：

```typescript
// 1. 智能缓存加载（推荐用于页面初始化）
await deviceStore.refreshDevices()
// 等同于 loadDevices(false)，会检查缓存

// 2. 明确指定是否强制刷新
await deviceStore.loadDevices(true)   // 强制刷新，忽略缓存
await deviceStore.loadDevices(false)  // 使用缓存（如果可用）
```

### 使用建议

- **页面初始化**：使用 `refreshDevices()` 
- **用户手动刷新**：使用 `loadDevices(true)`
- **定期更新**：使用 `loadDevices(false)`