Vue 监听store数据变化

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

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

        下面对于项目中经常开发的两种状态监听进行总结整理。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);
  }
}