vue页面中如何监听vuex中的数据变化

vue页面中如何监听vuex中的数据变化

需求：vuex里面的数据改变，想在对应使用的页面中进行实时监听到变化值

方法一：使用computed和watch监听vuex数据变化

1. conputed从Vuex中获取需要监听的对象，赋值给jtData；

   computed: {
       jtData() {
         return this.$store.state.storeData;
       },
     },
   

2. 在watch监听属性里，深度监听 jtData 实时变化

     watch: {
       jtData: {
         handler(nval, oval) {
           console.log(nval, oval);//nval改变后的新数据，oval改变前的旧数据
         },
         deep: true, // 深度监听
         immediate: true,//立即执行
       },
     },
   

方法二：直接对Vuex对象进行watch监听

	watch:{
		'$store.state.data.jtData'(newVal,oldVal){
			//对数据执行操作
			console.log(newVal,oldVal)
		}
	},