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);}
}