Vuex에서의 디바운스 사용방법

Vuex에서의 디바운스 사용방법

하려고 합니다.debounce외부 API가 필요한 Vuex 작업 내의 메서드.

// Vuex action:

async load ({ state, commit, dispatch }) {
  const params = {
    period: state.option.period,
    from: state.option.from,
    to: state.option.to
  }

  commit('SET_EVENTS_LOADING', true)
  const res = loadDebounced.bind(this)
  const data = await res(params)
  console.log(data)


  commit('SET_EVENTS', data.collection)
  commit('SET_PAGINATION', data.pagination)
  commit('SET_EVENTS_LOADING', false)

  return data
}



// Debounced method

const loadDebounced = () => {

  return debounce(async (params) => {
    const { data } = await this.$axios.get('events', { params })
    return data
  }, 3000)

}

로그 출력은 다음과 같습니다.

[Function] {                                                                                                                                                                                                           
  cancel: [Function]
}

실제로 디버깅된 기능을 실행하는 것이 아니라 다른 기능을 나에게 반환하는 것입니다.

vuex 스토어에서 사용할 수 있는 커스텀 디바운스 방법을 제시하겠습니다.

let ongoingRequest = undefined;
const loadDebounced = () => {
    clearTimeout(ongoingRequest);
    ongoingRequest = setTimeout(_ => {
        axios.get(<<your URL>>).then(({ data }) => data);
    }, 3000);
}

이 방법을 사용하면 먼저 진행 중인 모든 작업이 취소됩니다.setTimeout다시 실행할 수 있습니다.

이는 여기서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/61066905/how-to-use-debounce-with-vuex