Vuex：仅当存储属性存在时每 2 秒调度一个函数？

Question

我正在尝试运行一个函数，该函数发出 GET 请求以更新产品数量，但仅当商店currentProduct属性存在时。如果没有选定的产品，那么我不想让间隔无缘无故地触发一个功能。

在伪代码中，我基本上是说：

如果 $this.store.getters['myStore/getCurrentProduct']

那么 setInterval(this.$store.dispatch('updateQuantity'), 2000);

我唯一的想法是为 currentProduct 创建一个计算属性：

computed: {

     currentProd() {

         return $this.store.getters['myStore/getCurrentProduct'];

     }

}

然后看它：

watch: {

     currentProd(newVal,oldVal) {

          if (newVal != null) {

              let foo = setInterval(this.$store.dispatch('updateQuantity'), 2000);

          }

     } 

}

我只是不确定如何防止它重叠并且有大量的间隔触发

Answer 1

您应该将间隔对象存储在一个地方，以便您可以轻松地重置它，而不是在每次观察程序运行时在函数中创建一个新的本地间隔：data () {  return {    productCheckInterval: null  }},watch: {  currentProd (newVal, oldVal) {    clearInterval(this.productCheckInterval)    if (newVal !== null) {      this.productCheckInterval = setInterval(() => {        this.$store.dispatch('updateQuantity')      }, 2000)    }  } }