记项目中使用vuex + watch 时遇到的小问题

场景:
兄弟组件(这里称为A 和 B)：使用vuex进行组件间传值, A组件内有一个列表, 点击其中一个列表项, 在B组件内要增加这一项的内容, 点几次B组件内要增加几次, 类似于穿梭框 ,但不同的是, A组件内的列表项不会因为点击而减少

目录结构如下

当点击A组件内的三角形箭头时,会将当前项传给B组件,然后在B组件内用watch进行deep深度监听当前项变化时候去调接口,那么,问题来了,当一致点击同一项时候,第一次监听器会变化,但是之后就不会有变化,我思索良久,一致怀疑是侦听器或者是vuex出问题了,后面才发现问题所在. (陷进去了…) 因为当前项是一个引用类型{},若直接将当前项直接通过vuex传过去,那么在A组件内第一次能监听到变化,连续点击的话,其实当前项的地址是没变的,所以监听器watch根本监听不到变化,所以传值之前先深拷贝一下就能解决…

代码如下:

// A组件
    left(item) {
      // this.$store.commit("skill/SET_ITEM", item); // 没深拷贝,连续点击就会出问题
      this.$store.commit("skill/SET_ITEM", deepClone(item)); // 深拷贝后解决
    }

// B组件
  computed: {
    activeType() {
      return this.$store.getters.activeType;
    },
  },

  watch: {
    activeType: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(val);
        this.data = val;
        // 调接口进行添加
        ....
      }
    },
  },