我可以在 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

问题：

1. 递归setTimeout没有停止。
2. 倒计时器不会重置。
3. 使用setInterval(and clearInterval) 代替递归setTimeout。
4. 对于包括 在内的异步逻辑setTimeout，请使用操作而不是突变。
5. 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--;
  }
}