Vuex의 setimeout 기능 내 상태를 변경 및 커밋할 수 있습니까?

Vuex의 setimeout 기능 내 상태를 변경 및 커밋할 수 있습니까?

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 }} 

이것은 저의 템플릿으로 사용자가 폼을 제출하면 set Timeout 기능을 사용하여 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
}

이것은 동작하지 않습니다만, 상태를 변경할 수 있는 경우는, setimeout 기능내에서 변경을 커밋해 주세요.더 나은 구현 방법이 있을까요?

문제:

1. 재귀적setTimeout멈추지 않습니다.
2. 카운트다운 타이머가 리셋되지 않습니다.
3. 사용하다setInterval(그리고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--;
  }
}

언급URL : https://stackoverflow.com/questions/65646325/can-i-change-and-commit-the-state-inside-settimeout-function-in-vuex