Как использовать debounce с Vuex?

Question

Я пытаюсь debounce метод в действии Vuex, который требует внешнего API.

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

Это не на самом деле выполняю отклоненную функцию, но возвращаю мне другую функцию.

Answer 1

Я хотел бы представить пользовательский метод debounce, который вы можете использовать в вашем хранилище vuex как

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

Этот метод сначала гарантирует отмену любого текущего setTimeout в конвейере, а затем выполняет его снова.

Это можно увидеть в действии ЗДЕСЬ