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)
		}
	},
Logo

前往低代码交流专区

更多推荐