通过点击按钮来改变state的值,然后在其他组件内监听state值的改变来执行一个方法,
computed是监听改变之后返回一个值,如果要执行一个方法怎么做?
转自:https://blog.csdn.net/m0_37885651/article/details/79231670
watch:{
// '$store.state.lineData':function(){
// console.log('$store.state.lineData:',this.$store.state.lineData);
// }
},
这种监听方法要注意监听的对象,有时候会发现不好使,比如:lineData这个对象里面有a,b,c三个子属性,这个三个子属性的值来自ajax请求,于是为了方便,直接监听lineData,这样不论哪个子属性发生变化都能监听到,但是测试后发现,根本监听不到,只有监听具体的lineData.a , lineData.b,lineData.c才有反应。
或者深度监听lineData。
另一种方法:
//利用计算属性
computed: {
myNum() {
return this.$store.state.MyNum;
}
},
//监听执行
watch: {
myNum(val) {
console.log(val);
}
},
或者
computed:{
...mapGetters({
'storeGetPart2Content': 'faceDetail/part2Content'
}),
signAndFile: function () {
return this.storeGetPart2Content['current']
}
},
watch: {
'signAndFile':function() {
// storeGetPart2Content['current'] 不是一个对象,所以不需要深度监听
console.log('part2one.vue storeGetPart2Content is changed.');
}
},
如果监听的是一个对象,需要深度监听
watch: {
objParam: {
handler(newObj, oldObj) {
// coding
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}