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)

    }

  } 

}