akmon/pages/sense/deviceStoreExample.uts

/**
 * 设备 Store 使用示例
 * 展示如何在不同页面和组件中使用设备状态管理
 */

import { getDeviceStore } from '@/utils/store.uts'
import { ref, computed, onMounted } from 'vue'

export class DeviceStoreUsageExample {
	
	/**
	 * 示例1：在页面组件中使用设备列表
	 */
	static setupDeviceList() {
		const deviceStore = getDeviceStore()
		
		// 获取响应式设备列表
		const devices = computed(() => deviceStore.getDevices())
		const isLoading = computed(() => deviceStore.isLoading())
		const currentDevice = computed(() => deviceStore.getCurrentDevice())
		
		// 页面挂载时加载设备
		onMounted(async () => {
			await deviceStore.loadDevices() // 自动缓存，5分钟内不重复请求
		})
		
		// 强制刷新设备列表
		const refreshDevices = async () => {
			await deviceStore.loadDevices(true) // 强制刷新
		}
		
		// 选择设备
		const selectDevice = (device: any) => {
			deviceStore.setCurrentDevice(device)
		}
		
		return {
			devices,
			isLoading,
			currentDevice,
			refreshDevices,
			selectDevice
		}
	}
	
	/**
	 * 示例2：设备管理操作
	 */
	static setupDeviceManagement() {
		const deviceStore = getDeviceStore()
		
		// 绑定新设备
		const bindNewDevice = async (deviceData: UTSJSONObject) => {
			const success = await deviceStore.bindDevice(deviceData)
			if (success) {
				console.log('设备绑定成功')
				// 设备已自动添加到store中，UI会自动更新
			} else {
				console.log('设备绑定失败')
			}
			return success
		}
		
		// 解绑设备
		const unbindDevice = async (deviceId: string) => {
			const success = await deviceStore.unbindDevice(deviceId)
			if (success) {
				console.log('设备解绑成功')
				// 设备已自动从store中移除，UI会自动更新
			} else {
				console.log('设备解绑失败')
			}
			return success
		}
		
		// 更新设备配置
		const updateDeviceConfig = async (deviceId: string, configData: UTSJSONObject) => {
			const success = await deviceStore.updateDevice(deviceId, configData)
			if (success) {
				console.log('设备配置更新成功')
				// 设备信息已自动更新，UI会自动刷新
			} else {
				console.log('设备配置更新失败')
			}
			return success
		}
		
		return {
			bindNewDevice,
			unbindDevice,
			updateDeviceConfig
		}
	}
	
	/**
	 * 示例3：设备状态查询
	 */
	static setupDeviceQuery() {
		const deviceStore = getDeviceStore()
		
		// 获取在线设备
		const getOnlineDevices = () => {
			return deviceStore.getOnlineDevices()
		}
		
		// 根据ID获取设备
		const getDeviceById = (deviceId: string) => {
			return deviceStore.getDeviceById(deviceId)
		}
		
		// 获取设备数量
		const getDeviceCount = () => {
			return deviceStore.getDevices().length
		}
		
		// 检查是否有设备
		const hasDevices = computed(() => {
			return deviceStore.getDevices().length > 0
		})
		
		// 获取数据最后更新时间
		const getLastUpdated = () => {
			const timestamp = deviceStore.getLastUpdated()
			if (timestamp) {
				return new Date(timestamp).toLocaleString()
			}
			return '未更新'
		}
		
		return {
			getOnlineDevices,
			getDeviceById,
			getDeviceCount,
			hasDevices,
			getLastUpdated
		}
	}
	
	/**
	 * 示例4：在多个页面间共享设备状态
	 */
	static setupDeviceSync() {
		const deviceStore = getDeviceStore()
		
		// 页面A：设备列表页面
		const setupDeviceListPage = () => {
			const devices = computed(() => deviceStore.getDevices())
			const currentDevice = computed(() => deviceStore.getCurrentDevice())
			
			// 选择设备并导航到详情页
			const viewDeviceDetail = (device: any) => {
				deviceStore.setCurrentDevice(device)
				uni.navigateTo({
					url: `/pages/sense/detail?device_id=${device.id}`
				})
			}
			
			return { devices, currentDevice, viewDeviceDetail }
		}
		
		// 页面B：设备详情页面
		const setupDeviceDetailPage = () => {
			const currentDevice = computed(() => deviceStore.getCurrentDevice())
			
			// 如果没有当前设备，尝试从URL参数获取
			onMounted(() => {
				if (!currentDevice.value) {
					// 从URL获取device_id并设置当前设备
					const pages = getCurrentPages()
					if (pages.length > 0) {
						const currentPage = pages[pages.length - 1]
						const deviceId = currentPage.$scope.options.device_id
						if (deviceId) {
							const device = deviceStore.getDeviceById(deviceId)
							if (device) {
								deviceStore.setCurrentDevice(device)
							}
						}
					}
				}
			})
			
			return { currentDevice }
		}
		
		return {
			setupDeviceListPage,
			setupDeviceDetailPage
		}
	}
}

/**
 * 在Vue组件中的完整使用示例
 */
export function createDevicePageSetup() {
	return {
		name: 'DevicePage',
		setup() {
			const deviceStore = getDeviceStore()
			
			// 响应式状态
			const devices = computed(() => deviceStore.getDevices())
			const isLoading = computed(() => deviceStore.isLoading())
			const currentDevice = computed(() => deviceStore.getCurrentDevice())
			
			// 页面挂载
			onMounted(async () => {
				// 加载设备列表（自动缓存）
				await deviceStore.loadDevices()
			})
			
			// 操作方法
			const refreshDevices = async () => {
				await deviceStore.loadDevices(true)
			}
			
			const selectDevice = (device: any) => {
				deviceStore.setCurrentDevice(device)
			}
			
			const bindDevice = async (deviceData: UTSJSONObject) => {
				return await deviceStore.bindDevice(deviceData)
			}
			
			const unbindDevice = async (deviceId: string) => {
				return await deviceStore.unbindDevice(deviceId)
			}
			
			// 计算属性
			const onlineDeviceCount = computed(() => {
				return deviceStore.getOnlineDevices().length
			})
			
			const hasDevices = computed(() => {
				return devices.value.length > 0
			})
			
			// 返回给模板使用
			return {
				devices,
				isLoading,
				currentDevice,
				onlineDeviceCount,
				hasDevices,
				refreshDevices,
				selectDevice,
				bindDevice,
				unbindDevice
			}
		}
	}
}