Vuex에서 Interval을 지우는 방법

Vuex에서 Interval을 지우는 방법

내 vuex 매장의 간격을 좁히려고 하는데 작동이 안 돼.

startCounter에서 stopCounter의 간격을 지우기 위해 내 카운트가 100인지 확인

clearInterval(this.myCounterInterval);

여기 내 암호야, 고마워.

import Vue from "vue";
import Vuex from "vuex";
import videos from "@/models/videos";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
    totalTime: 20,
    myCounterInterval: 0,
    visible: false,
    show: false,
    videos: {
      type: Array,
      default: () => videos
    }
  },
  mutations: {
    visibleProgressBar (state) {
      state.visible = true;
    },
    invisibleProgressBar (state) {
      state.visible = false;
    },
    showModal (state) {
      state.show = true;
    },
    hideModal (state) {
      state.show = false;
    },
    countDown (state) {
      if(state.totalTime >= 1) {
        state.totalTime--;
        state.count += 5;
      } else {
        state.totalTime = 0;
        state.count = 0;
        return;
      }
    },
    setCounter (state, newCount) {
      state.count = newCount;
    },
    stopCounter (state) {
      clearInterval(this.myCounterInterval);
      state.count = 0;
    },
    setVideos (state) {
      state.videos;
    }
  },
  actions: {
    startCounter ({ state, commit }) {

      this.myCounterInterval = commit("setCounter", setInterval(() => {
        commit("countDown");

        if(state.count === 100) {
          commit("stopCounter");
        }
      }, 1000));
    },
    stopCounter ({ commit }) {
      commit("stopCounter");
    },
    showProgressBar ({ commit }) {
      commit("visibleProgressBar");
    },
    hideProgressBar ({ commit }) {
      commit("invisibleProgressBar");
    },
    showModal ({ commit }) {
      commit("showModal");
    },
    hideModal ({ commit }) {
      commit("hideModal");
    },
    getVideos ({ commit }) {
      commit("setVideos");
    }
  },
  modules: {}
});

이런 것도 할 수 있다.

stopCounter (state) {
    state.myCounterInterval = null
    ...
},

간격을 다음과 같이 설정하십시오.

행동들

startCounter ({ state, commit }) {
      commit("setCounter")
}

돌연변이

setCounter (state) {
   state.count = 0;
   state.myCounterInterval = setInterval(() => {
      your logic
   }, 1000))
},

이 할당을 제거해야 하는 경우:

this.myCounterInterval = commit("setCounter", setInterval(() => {

, 그리고 단지 커밋:

commit("setCounter", setInterval(() => {

"SetCounter" 돌연변이는 카운터를 state.count에 할당한다.

setCounter (state, newCount) {
  state.count = newCount;
}

다음 간격을 삭제하십시오.

stopCounter (state) {
  clearInterval(state.count);
}

이건 내게 효과가 있다.

참조URL: https://stackoverflow.com/questions/62898729/how-to-clearinterval-in-vuex