Vue2 监听vuex总state值的变化

通过点击按钮来改变state的值，然后在其他组件内监听state值的改变来执行一个方法，
computed是监听改变之后返回一个值，如果要执行一个方法怎么做?

转自：https://blog.csdn.net/m0_37885651/article/details/79231670

watch:{
    // '$store.state.lineData':function(){
    //   console.log('$store.state.lineData:',this.$store.state.lineData);
    // }
},

这种监听方法要注意监听的对象，有时候会发现不好使，比如:lineData这个对象里面有a,b,c三个子属性，这个三个子属性的值来自ajax请求，于是为了方便，直接监听lineData，这样不论哪个子属性发生变化都能监听到，但是测试后发现，根本监听不到，只有监听具体的lineData.a , lineData.b，lineData.c才有反应。
或者深度监听lineData。

另一种方法：

//利用计算属性
  computed: {
    myNum() {
      return this.$store.state.MyNum;
    }
  },
  //监听执行
  watch: {
    myNum(val) {
      console.log(val);
    }
  },

或者

computed:{
    ...mapGetters({
      'storeGetPart2Content': 'faceDetail/part2Content'
    }),
    signAndFile: function () {
      return this.storeGetPart2Content['current']
    }
  },
watch: {
    'signAndFile':function() {
      // storeGetPart2Content['current'] 不是一个对象，所以不需要深度监听
      console.log('part2one.vue storeGetPart2Content is changed.');
    }
  },

如果监听的是一个对象，需要深度监听

watch: {
  objParam: {
    handler(newObj, oldObj) {
       // coding
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}