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; //A
	items.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