方式一
watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){
console.log(newVal,oldVal); } } }
方式二
computed: { isEdit () { return this.$store.state.userInfo.Name;  //需要监听的数据 } },
watch: { isEdit(newVal, oldVal) { console.log(newVal,oldVal); } },
区别

* 区别一:第二种方式是先通过计算属性时刻监测store的数据变化,从而触发isEdit的监听函数,明显需要多一步
*
区别二:如果监听store的数据是一个对象,第一种方式只需要加上深度监听,也可以实现数据的变化监听,而第二种方式却无法监听到store的对象数据变化,例如
第一种方式
watch: { //此时我监听的是对象,当$store.state.userInfo.Name发生修改时,此时需要深度监听才能监听到数据变化
"$store.state.userInfo":{ deep:true,//深度监听设置为 true handler:function(newVal,
oldVal){ console.log("数据发生变化啦"); //修改数据时,能看到输出结果 console.log(newVal,oldVal); } }
}
第二种方式
computed: { isEdit () { return this.$store.state.userInfo;  //需要监听的数据 }, },
watch: { isEdit(newVal, oldVal) { console.log("数据发生变化啦");
//修改数据时,看不到该输出结果,因为无法监听到数据的变化 console.log(newVal,oldVal); } },

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信