Vue的watch写法及用法注意

今天碰到一个需求是在首页(单独组件)点击,弹出在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
    }
  } 

总结:其实只要在触发的方法里去做重置操作就行了...避免 重置操作后立刻就执行赋值操作,导致数据切换太快,而无法触发