javascript - 我可以在 Vuex 的 settimeout 函数中更改并提交状态吗？

Question

form(@submit.prevent="onSubmit")
   input(type="text" v-model="platform" placeholder="Add platform name...")
   input(type="submit" value="Submit" class="button" @click="clicked = true")
   button(type="button" value="Cancel" class="btn" @click="cancelNew") Cancel      
      h3(v-if="clicked")  Thank you for adding a new platform 
         span {{ countdown }} 

这是我的模板，当用户提交表单时，我想使用 setTimeout 函数从 3 开始倒计时并在 3 秒后提交。
如果我有这种方式，它可以工作；

data() {
  return {
    countdown: 3,
    platform: ""
  }
},
methods: {
  countDownTimer() {
    setTimeout(() => {
      this.countdown -= 1
      this.countDownTimer()
    }, 1000)
  },
  onSubmit() {
    let newplatform = {
      name: this.platform
    }
    this.addPlatform(newplatform)
    this.platform = ' ' 
    this.countDownTimer()
  }
}

但是我还有 3 个表格，我不想重复代码。所以我想在店里放倒计时，

countDownTimer({commit}) {
  setTimeout(() => {
    countdown = state.countdown
    countdown -= 1
    commit('COUNTDOWN', countdown)
    this.countDownTimer()
  }, 1000)
}

并像这样变异它

COUNTDOWN(state, countdown) {
  state.countdown = countdown
}

这不起作用，我不确定是否能够更改状态，在 settimeout 函数内提交更改？有没有更好的方法可以实现这一点？

Answer 1

问题:

递归 setTimeout没有停止。

倒数计时器未重置。

使用setInterval (和 clearInterval )而不是递归的 setTimeout .

对于异步逻辑，包括 setTimeout ，使用 Action 而不是突变。

包括state从上下文对象(你得到 commit )，否则它将是未定义的。

尝试这个:

actions: {
  countDownTimer({ state, commit, dispatch }) {  // state, commit, dispatch
    commit('RESET');
    const interval = setInterval(() => {         // Use `setInterval` and store it
      commit('COUNTDOWN');
      if (state.countdown === 0) {
        clearInterval(interval);                 // Clear the interval
        dispatch('updateDatabase');              // Call another action
      }
    }, 1000)
  }
}

mutations: {
  RESET(state) {
    state.countdown = 3;
  },
  COUNTDOWN(state) {
    state.countdown--;
  }
}