250 lines
6.3 KiB
Markdown
250 lines
6.3 KiB
Markdown
# 设备状态管理 (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)`
|