记录时间：2024-02-28
一、useDeviceStore模块实现
types/device.ts
// 定义 DeviceInfo 的类型 interface DeviceInfo { Id: string TypeId: number TypeName: string DeviceId: number OrderNo: number DeviceName: string DeviceCode: string ParentId: number ParentDeviceName: string | null ParentDeviceCode: string | null Config: string }// 定义 DeviceStatus 的类型 interface DeviceStatus { Id: string DeviceName: string DeviceCode: string DeviceStatus: string }
export type { DeviceInfo, DeviceStatus }
store/useDeviceStore.ts
import { defineStore } from 'pinia' import { DeviceInfo, DeviceStatus } from '@/types/device'export const useDeviceStore = defineStore('device', { state: () => ({ TerminalIp: '', TerminalNo: '', TypeId: '', TypeName: '', DeviceInfoList: [] as Array<DeviceInfo>, DeviceStatusList: [] as Array<DeviceStatus> }),
actions: { // 设置终端IP setTerminalIp(ip: string) { this.TerminalIp = ip },
// 设置终端编号 setTerminalNo(ip: string) { this.TerminalNo = ip },
// 设置终端类型Id setTerminalTypeId(typeId: string) { this.TypeId = typeId },
// 设置终端类型名称 setTerminalTypeName(typeName: string) { this.TypeName = typeName },
// 设置设备信息列表 setDeviceInfoList(deviceInfoList: Array<DeviceInfo>) { this.DeviceInfoList = deviceInfoList for (let i = 0; i < deviceInfoList.length; i++) { const deviceInfo = deviceInfoList[i] this.DeviceStatusList.push({ Id: deviceInfo.Id, DeviceName: deviceInfo.DeviceName, DeviceCode: deviceInfo.DeviceCode, DeviceStatus: '0' }) } },
// 更新设备状态 updateDeviceStatus(deviceId: string, status: string) { const deviceIndex = this.DeviceStatusList.findIndex( (d) => d.Id === deviceId ) if (deviceIndex !== -1) { this.DeviceStatusList[deviceIndex].DeviceStatus = status } } }, getters: { getTerminalIp: (state) => state.TerminalIp, getTerminalNo: (state) => state.TerminalNo, getTerminalTypeId: (state) => state.TypeId, getTerminalTypeName: (state) => state.TypeName, getDeviceInfoList: (state) => state.DeviceInfoList, getDeviceStatusList: (state) => state.DeviceStatusList } })
二、调用示例
test-hook-use-device-store.vue <script setup lang="ts"> import { clientWebApi } from '@/service' import { ajaxWebApi } from '@/framework/utils/ajax-util' import { useDeviceStore } from '@/store/useDeviceStore' import { Terminal } from '@/types/terminal'const deviceStore = useDeviceStore() clientWebApi('/api/System/GetIpAddress', {}).then((res: string) => { const terminalIp = res deviceStore.setTerminalIp(terminalIp)
ajaxWebApi('/api/Terminal/GetTerminalByTerminalIp', true, { terminalIp: terminalIp }).then((res: any) => { const terminals = res if (terminals && terminals.length > 0) { const terminal: Terminal = terminals[0] deviceStore.setTerminalNo(terminal.TerminalNo) deviceStore.setTerminalTypeId(terminal.TypeId) deviceStore.setTerminalTypeName(terminal.TypeName)
ajaxWebApi('/api/Terminal/GetDeviceListByTerminalTypeId', true, { terminalTypeId: deviceStore.TypeId }).then((res: any) => { const deviceInfoList = res if (deviceInfoList && deviceInfoList.length > 0) { deviceStore.setDeviceInfoList(deviceInfoList) } }) } }) }) </script>
<template> <div> <!-- 显示 terminal 信息 --> <p>Terminal IP: {{ deviceStore.getTerminalIp }}</p> <p>Terminal No: {{ deviceStore.getTerminalNo }}</p> <!-- <p>Terminal Type Id: {{ deviceStore.getTerminalTypeId }}</p> --> <!-- <p>Terminal Type Name: {{ deviceStore.getTerminalTypeName }}</p> --> <hr /> <!-- 使用 p元素 和 v-for 遍历 DeviceInfoList 每个对象创建一个新的行 --> <p v-for="(value, key) in deviceStore.getDeviceInfoList" :key="key"> {{ key }}: {{ value }} </p> <hr /> <!-- 使用 p元素 和 v-for 遍历 DeviceStatusList 每个对象创建一个新的行 --> <p v-for="(value, key) in deviceStore.getDeviceStatusList" :key="key"> {{ key }}: {{ value }} </p> </div> </template>
<style scoped></style>
三、运行测试
翻译
搜索
复制
<iframe></iframe> 标签：web,deviceInfoList,string,useDeviceStore,ssts,hospital,deviceStore,state,const From： https://www.cnblogs.com/lizhigang/p/18041743