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="bringComponent") 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函数中提交更改？有没有更好的方法可以实现呢？
问题：
setTimeout没有停止。setInterval（和clearInterval）而不是递归的setTimeout。setTimeout，请使用操作而不是突变。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--;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句