vue 中监听 store 中值的变化

2021-2-26 18:18:34

才知道watch是可以监听store中的值的。

watch: {
  "$store.state.userInfo.Name":{
    handler:function(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}

如果监听的是对象，需要加上深度

watch: {
  //此时我监听的是对象，当$store.state.userInfo.Name发生修改时，此时需要深度监听才能监听到数据变化
  "$store.state.userInfo":{
    deep:true,//深度监听设置为 true
    handler:function(newVal,oldVal){
      console.log("数据发生变化啦"); //修改数据时，能看到输出结果
      console.log(newVal,oldVal);
    }
  }
}

如果用计算属性监听的话，监听对象就不好使了。

computed: {
  isEdit () {
    return this.$store.state.userInfo;　　//需要监听的数据
  },
},
watch: {
  isEdit(newVal, oldVal) {
    console.log("数据发生变化啦"); //修改数据时，看不到该输出结果，因为无法监听到数据的变化
    console.log(newVal,oldVal);
  }
},

参考链接