今天碰到一个需求是在首页(单独组件)点击,弹出在header组件里的聊天框,通知通过vuex进行状态管理,然后watch状态来进行打开窗口,但是发现如果commit改变state太快,普通的写法并不会触发,所以特地记录一下.
1.普通写法:(第一次会触发,第二次就不行了,即使我在首页再多执行一次重置chatStatus)
首页点击
this.$store.commit('getChat', '')//重置chatStatus
this.$store.commit('getChat', 'start')//通知header打开聊天chatStatus
header组件
watch: {
'$store.state.chatStatus'(n, o) { //具体到某一对象下的属性用''包裹下
if (n === 'start') {//因为上面的commit太快,导致不会触发
this.chatWith();//可以在方法里进行重置chatStatus,或者加一个延时到赋值操作上
}
},
},
cityName(newName, oldName) { //普通的观察变量
// ...
}
2.带immediate和deep的写法
(immediate:如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。)
(deep:当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。)
首页点击
this.$store.commit('getChat', 'empty')//重置chatStatus
this.$store.commit('getChat', 'start')//通知header打开聊天chatStatus
header组件
watch: {
'$store.state.chatStatus': {
handler(n, o) { //接收首页状态
console.log(n,o)//打印结果,虽然每次点击之后,结果还是start,start,但是这个时候就可以重复触发了(实测原因是因为commit太快..所以导致数据同步速度没变化快)
if (n === 'start') {
this.chatWith();
}
},
deep: true,//加了deep之后就解决了
},
cityName: {//普通变量
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
总结:其实只要在触发的方法里去做重置操作就行了...避免 重置操作后立刻就执行赋值操作,导致数据切换太快,而无法触发
