UNIAPP中借助store+watch完成实时数据

简介

  • 手机端蓝牙连接校验仪,校验仪上传校验数据至手机完成展示。
  • 基于watch,完成实时展示数据。
  • 对象放在store中。
  • 实现分为store中的配置,数据接收,数据展示

store配置

  • 在state中配置属性,在mutations中配置更新方法,在getters中配置属性获取方法。
const store = createStore({state: {itemStatus: {}},mutations: {//更新数据updateItemStatus(state, newValue) {state.itemStatus= newValue;}},getters: {getItemStatus(state) {return state.itemStatus;}},actions: {}
})

数据接收

const mockDataUpdate = function(items) {const itemStatus= store.getters.getItemStatus; //Aitems.forEach(item => {if (indexStatus[item] === undefined) {indexStatus[item] = 2;} else if (indexStatus[item] === 2) {indexStatus[item] = [0, 1][Math.round(Math.random())];}});let newItemStatus = {};Object.assign(newItemStatus , itemStatus);store.commit("updateItemStatus", newItemStatus );//B
}/*** @param {Object} items 数据项* 模拟数据上报*/
const startCalibrate = function (items) {mockDataUpdate(items);let index = 0;let intervalIndex = setInterval(() => {index++;mockDataUpdate(items);if (index > 10) {clearInterval(intervalIndex);}}, 5000);
}
备注
  • A: 这里注意,store中申明的是方法,这里按照对象调用。
  • B: 这里发现,只要新对象就会触发watch,如果是旧对象反复赋值不会触发watch。

数据展示

  • 使用watch实现数据的实时展示。
export default {...computed: {itemStatus() {return this.$store.state.itemStatus;}},watch:{itemStatus(newVal, oldVal) {console.log("watch itemStatusfunc");console.log(newVal);}},...
}

第二种

  1. 如果数据简单的话,并不需要使用store和watch。
  • 模拟变更处代码如下:
const createPro1 = function() {return {key: Math.random()}
}const allData = {childData: {pro1: createPro(),pro2: createPro()}
}const startChange = function() {let index = 0;const intervalIndex = setInterval(() => {index++;if (index > 5) {clearInterval(intervalIndex);return; }const pro1 = createPro();Object.assign(allData.childData.pro1, pro1);//B}, 2000)
}export {allData,startChange,
}
  • 数据展示处代码如下:
<uni-tr><uni-td align="center" style="width: 50%">仿真数据</uni-td><uni-td align="center">{{mock.key}}</uni-td>
</uni-tr>
import {allData, startChange} from "@/common/connectDevice.js";
export {onLoad() {startChange();},data() {return {mock: allData.childData.pro1,//A...}},...
}
  • 备注
  1. 注意代码中A和B处层级是一致的。比如除上文所写外,还可以写成:
//B
allData.childData = {pro1: createPro(),pro2: createPro()
}//A
mock: allData

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构与算法】字符串匹配(头歌习题)【合集】

目录 第1关&#xff1a;实现朴素的字符串匹配任务描述相关知识编程要求评测说明完整代码 第2关&#xff1a;实现KMP字符串匹配任务描述相关知识编程要求评测说明完整代码 第3关&#xff1a;【模板】KMP算法任务描述相关知识C STL容器string1、string的定义2、string中内容的访问…

16.综合项目实战

一、基础演练&#xff1a; 1、建库、建表 # 创建数据库 create database mysql_exampleTest; use mysql_exampleTest; # 学生表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(20) NOT NULL DEFAULT , s_birth VARCHAR(20) NOT NULL DEFAULT , s_sex VARC…

pytorch中的torch.squeeze和torch.unsqueeze

torch.squeeze(input, dimNone) → Tensortorch.unsqueeze()函数的作用减少数组input指定的维度dim&#xff0c;如果dim不指定&#xff0c;则删除大小为1的维度。返回一个tensor。 如果数组A的维度为&#xff08;1&#xff0c;1&#xff0c;3&#xff09;那么执行 torch.squeez…

微信小程序有几个文件

微信小程序通常由多个文件组成&#xff0c;主要包括以下几种类型的文件&#xff1a; JSON 配置文件&#xff1a; app.json: 整个小程序的全局配置&#xff0c;包括页面路径、窗口样式、网络超时时间等。 page.json: 单个页面的配置&#xff0c;用于指定该页面的窗口样式、导航…

ChatGPT 对SEO的影响

ChatGPT 的兴起是否预示着 SEO 的终结&#xff1f; 一点也不。事实上&#xff0c;如果使用得当&#xff0c;它可以让你的 SEO 工作变得更加容易。 强调“正确使用时”。 你可以使用ChatGPT来帮助进行关键字研究的头脑风暴部分、重新措辞你的内容、生成架构标记等等。 但你不…

MathType 运行时错误‘53’:文件未找到:MathPage.WLL_文件未找到mathpage.wll

问题描述 环境 MathType7.4Microsoft Office 365Windows 11 问题 情景1. Microsoft Word 启动时显示 Please reload Word to load MathType addin properly 情景2. 安装MathType后在 Microsoft Word 中使用复制粘贴时报错 运行时错误‘53’ 情景3. 在 Microsoft Word 中使用 M…

Jenkins 系列:Jenkins 安装(Windows、Mac、Centos)和简介

文章目录 简介发展历史应用场景 Jenkins 安装部署先决条件硬件要求软件包下载war 包部署linux 系统部署mac 系统部署windows 系统部署安装后基本配置解锁自定义 jenkins 插件创建用户配置更新站点 配置文件 简介 Jenkins前身是 Hudson&#xff0c;使用 java 语言开发的自动化发…

mxxWechatBot微信机器人V2使用教程(图文)最全最详细

大家伙&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 先看这里 mxxWechatBot功能列表一、前言二、适用人群三、准备工作四、获取账号五、下载资料 六、安装相关软件七、启动客户端八、注入并启动微信九、机器人的基本配置十、自定义接口开发 …

2023年总结2024年展望

这一年技术性的博客写的比较少&#xff0c;更多的时间是在赶项目和考试 从大年初四开始到公司加班赶项目&#xff0c;这一年过得紧张而充实&#xff0c;也尝试了不少新技术&#xff0c;技能有所提升&#xff0c;希望在2024年&#xff0c;和小伙伴们一起&#xff0c;能够持续聚…

AutoSAR(基础入门篇)4.7-Autosar_BSW的Diagnostics功能

Autosar_BSW的Diagnostics功能 一、Autosar_BSW的Diagnostics功能 1、Diagnostics组件图 2、架构与术语解释 3、工作流程

医学图像分割中的频域多轴表示学习

摘要 https://arxiv.org/pdf/2312.17030v1.pdf 最近&#xff0c;视觉Transformer (ViT)在医学图像分割&#xff08;MIS&#xff09;中得到了广泛应用&#xff0c;这归功于其在空间域应用自注意力机制来建模全局知识。然而&#xff0c;许多研究都侧重于改进空间域模型&#xff…

go操作doris踩坑记录

go 操作 doris 踩坑记录 1.doris 无法用 delete from 删除整个表数据 2.doris 本身事务只支持 insert、rollback、commit Error 1105 (HY000) : TException,msg: org.apache.thrift.TException: This is in a transaction, only insert, commit, rollback is acceptable 最坑…

vue-springboot基于Javaweb的二手儿童绘本网上商城交易系统设计与实现

本二手儿童绘本交易系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了用户、商家和管理员这三者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽…

苏州科技大学计算机817程序设计(java) 学习笔记

之前备考苏州科技大学计算机&#xff08;专业课&#xff1a;817程序设计&#xff08;java&#xff09;&#xff09;。 学习Java和算法相关内容&#xff0c;现将笔记及资料统一整理归纳移至这里。 部分内容不太完善&#xff0c;欢迎提议。 目录 考情分析 考卷题型 刷题攻略…

对采集到的温湿度数据,使用python进行数据清洗,并使用预测模型进行预测未来一段时间的温湿度数据。

使用Python对传感器采集到的数据进行数据清洗和预测未来一段时间的温湿度数据&#xff0c;您可以按照以下步骤进行操作&#xff1a; 导入必要的库 import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.linear_model …

关于求定积分的反函数的导数【认清原函数x变量和反函数x变量】

如图碰到该题该怎么解&#xff1f; 在纸上按①②③的顺序写出这个&#xff0c;其中①是最主要的 第②步和第③步就是在用反函数时要用到的逻辑思维&#xff0c;不是一起用的&#xff0c;你需要用②才去用②&#xff0c;你需要用③才去用③ 在纸上先写出第①步&#xff0c;即 其…

使用Microsoft托管密钥的Azure信息保护云退出

由于各种原因&#xff0c;一些组织需要一个明确定义的流程来停止使用 Azure 信息保护以及对云服务的任何依赖&#xff0c;而不会在采用之前失去对其数据的访问权限 - 以便在出现需要时做好准备。 Azure 信息保护 (AIP) 为使用自带密钥 (BYOK) 的客户和使用 Microsoft 托管密钥…

语义分割的应用及发展

语义分割(Semantic Segmentation)是一种计算机视觉领域的任务&#xff0c;旨在将一张图像中的每一个像素都分配一个语义标签&#xff0c;即将图像中的每个物体区域进行精确的分类划分。例如&#xff0c;在一张街景图中&#xff0c;语义分割可以将人、车、路、天空等每个像素分别…

子网划分问题(实战超详解)_主机分配地址

文章目录: 子网划分的核心思想 第一步,考虑借几位作为子网号 第二步,确定子网的网络地址 第三步,明确网络地址,广播地址,可用IP地址范围 一些可能出现的疑问 实战 题目一 子网划分的核心思想 网络号不变,借用主机号来产生新的网络 划分前的网络:网络号主机号 划分后的网络:原网…

高并发处理专题研究 - epoll并发编程[更新中]

文章目录 1 前置知识1.1 Socket编程基础Socket概述Socket通信模型Socket API一个简单的Socket编程实例 1.2 IO多路复用1.3 阻塞原理 2 epoll原理2.1 epoll概述2.2 epoll系统调用epoll_create()epoll_ctl()epoll_wait() 2.3 epoll工作原理 3 示例代码及演示 1 前置知识 1.1 Soc…