如何在Vuex中第一个计时器到期后启动第二个计时器

Question

我有一个Vue项目，在Vuex商店中我有以下状态：

state: {
gameStartTimer: 5,
counter: false,
randomNumber: Number,
clickAlert: false
}

现在，在actions中，我有以下内容：

actions: {
async startCounter({ state }) {
state.counter = true;
state.clickAlert = false;
while (state.gameStartTimer > 0 && state.counter) {
// this sets the timer to count down from 5 to 0
await new Promise(resolve => setTimeout(resolve, 1000));
if (state.counter)
state.gameStartTimer--;
// the if-statement ensures nowTime is acquired upon gameStartTimer reaches 0
if (state.gameStartTimer == 0) {
let timeNow = new Date().getTime();
state.nowTime = timeNow;
}
}
state.counter = false;
// I want to start a second timer here which counts down every second 
// until the randomNumber state reaches 0
await new Promise(resolve => setTimeout(resolve, 1000));
if (state.clickAlert)
state.randomNumber--;
if (state.randomNumber == 0) {
state.clickAlert = true;
}
}
},
}

我面临的问题是，第一个计时器被一个while循环包围，这正是我想要的，这样游戏就开始从5倒计时到0。

然后，我希望第二个计时器(randomNumber用于持续时间(在后台运行，然后将clickAlert状态设置为true。

然而，我根本无法在async/await方法中运行第二个计时器。我不太确定语法或逻辑问题是什么

任何小费都将不胜感激。

Answer 1

显而易见的解决方案似乎也只是将第二个计时器封装在while循环中。

while (state.randomNumber > 0) {
await new Promise(resolve => setTimeout(resolve, 1000));
state.randomNumber--;
if (state.randomNumber === 0) {
state.clickAlert = true;
}
}

async/await只是避免回调函数的一种方法。它在功能上相当于：

while (state.randomNumber > 0) {
setTimeout(() => {
state.randomNumber--;
}, 1000);
}