当前位置:首页 > 编程笔记 > 正文
已解决

Vue 监听store数据变化

来自网友在路上 165865提问 提问时间:2023-11-07 16:09:39阅读次数: 65

最佳答案 问答题库658位专家为你答疑解惑

        天冷了,手也冷了,于学问于个人成长不能因为冷而荒废。毕业这么多年,只能感慨。这样努力的工作只是解决了温保问题,何时才能任性的过一回说走就走的自由生活?

        大抵这样的梦想也就只能停留在梦里与期待中吧,与我这样的相同的大多数,我估计也是大有人在吧。只能苦逼中做乐,寻找点真正生活的气息,谁发明了打工,谁发明了苦力?也许只有苦中做乐才能感觉到一点生活的真实与现实的惨烈吧。

        下面对于项目中经常开发的两种状态监听进行总结整理。state是全局一个状态管理类,有时候修改某个属性的值,我们在其他页面或者是模块来处理相应的业务或刷新数据。如何实现呢?

方式一:直接监听属性!

watch: {"$store.state.userMap.name":{handler:function(newVal,oldVal){}}
}

方式二:运算属性及监听配合

computed: {isChanged () {return this.$store.state.userMap.name;  //需要监听的属性}
},
watch: {isChanged(newVal, oldVal) {}
}

区别

  • 区别一:第二种方式是先通过计算属性时刻监测store的数据变化,从而触发isEdit的监听函数,明显需要多一步
  • 区别二:如果监听store的数据是一个对象,第一种方式只需要加上深度监听,也可以实现数据的变化监听,而第二种方式却无法监听到store的对象数据变化,例如

 

watch: {/*此时监听的是对象,当$store.state.userMap.name被修改时,
此时要进行深度监听才能收到数据变化的回调,注意deep:true,意为深度监听,
如果是false,在userMap.name变化时此时是不进行回调的*/"$store.state.userMap.name":{deep:true,handler:function(newVal,oldVal){console.log("数据发生变化"); //修改数据时,立即回调console.log(newVal,oldVal);}}
}
computed: {isChanged () {return this.$store.userMap.name;},
},
watch: {isChanged(newVal, oldVal) {console.log("数据发生变化"); //修改数据时无法回调,因为不是深度监听无法监听到数据变化console.log(newVal,oldVal);}
}

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"Vue 监听store数据变化":http://eshow365.cn/6-34601-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!