大型门户网站建设美丽,出词,网站代运营协议,wordpress 数据库 发布简介
手机端蓝牙连接校验仪#xff0c;校验仪上传校验数据至手机完成展示。基于watch#xff0c;完成实时展示数据。对象放在store中。实现分为store中的配置#xff0c;数据接收#xff0c;数据展示
store配置
在state中配置属性#xff0c;在mutations中配置更新方法…简介
手机端蓝牙连接校验仪校验仪上传校验数据至手机完成展示。基于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);}},...
}第二种
如果数据简单的话并不需要使用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-truni-td aligncenter stylewidth: 50%仿真数据/uni-tduni-td aligncenter{{mock.key}}/uni-td
/uni-trimport {allData, startChange} from /common/connectDevice.js;
export {onLoad() {startChange();},data() {return {mock: allData.childData.pro1,//A...}},...
}备注
注意代码中A和B处层级是一致的。比如除上文所写外还可以写成
//B
allData.childData {pro1: createPro(),pro2: createPro()
}//A
mock: allData
