物联网项目设备端更新状态或数据后，前端页面不实时更新数据。必须刷新才会同步。

问题描述：

        目前在做一个物联网设备相关的项目，设备端点击按钮或者输入框修改了状态或者数据之后，后台数据是变化了。但是我的前端页面并没有实时更新dom，依然是修改之前的数据。必须手动刷新之后才会同步数据。

问题分析：

        代码中读取数据用的是轮询获取的方式，按理是应该实时更新的。但是声明的deviceData数据变量是计算属性（computed），后来看计算属性属于懒加载，数据不改变不会重新加载数据。但是我在设备端改变数据了啊，估计是在设备端改变数据而不是在前端手动改变数据他监测不到吧？具体我也不清楚，希望大佬给我解答一下。

问题解决：

        所以我考虑是因为计算属性的问题，对应搜索计算属性相关的解决办法。看到一篇文章说计算属性不更新什么的（https://deepinout.com/vue-js/vue-js-questions/662_vuejs_vuex_not_updating_computed_variable_mapped_using_mapstate.html），他的代码示例我代码中就有用到这种形式。因为我的输入框跟数据都是双向绑定，我在想要不要把双向绑定的这个变量给他赋值最新的后台数据，这样前端就可以更新了。

        问题确实解决了，参考文章：https://deepinout.com/vue-js/vue-js-questions/980_vuejs_vue_component_assign_computed_property_to_data.html但是设备端改变数据大概七秒之后前端页面才会更新，这个对于用户来说并不是一种很好的体验。而且还有一个小问题，数据请求是轮询的方式每1.5秒请求一次数据，watch也会监听到认为数据更新了，他就会重新赋值。但是呢我设置数据请求反应相对慢一点，所以修改完数据后中间输入框数据会闪动出现一下修改前的数据。但最后都会变为修改后的数据。下面是我的解决代码，所以有没有大佬有更好的解决解决办法啊，求！总怀疑自己这方法不对。

1：这是前端页面代码

<view style="flex: 0.7;">
	<input type="text" placeholder="请输入" v-model="paiWaterTime" style="text-align: right;" @confirm="paiWaterInput($event)"/>
</view>

2：这是数据代码

computed: {
	...mapState({
		deviceData: state => state.deviceData
			
	})
},
data(){
    return{
        paiWaterTime:''
    }
}

3：这是js代码

watch:{
	deviceData:{
        handler(newVal){
		    // 排水时间设定
		    this.paiWaterTime = newVal.PaiwaterST.value
					
	    },
	    deep:true
    }
},

method:{
    paiWaterInput(e){
	    this.paiWaterTime = e.target.value
        this.$AlicloudApi.setDeviceProperty({"PaiwaterST":this.paiWaterTime*10}).then(res=>{})
	},
    
}