Vue.js 如何在Vuex中使用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]
}

---

它实际上并不是在执行去抖动功能，而是返回给我另一个功能。

我想介绍一种自定义的去抖动方法，您可以在vuex存储中作为

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

让ongoingRequest=未定义；
常量loadDebounced=（）=>{
clearTimeout（ongoingRequest）；
ongoingRequest=setTimeout（=>{
get（）.then（（{data}）=>data）；
}, 3000);
}

此方法首先确保取消管道中任何正在进行的

setTimeout

，然后再次执行

---

这可以从行动中看出

您能否详细阐明您的意图。

去盎司

会有什么好处？以及

去盎司

的实现是什么？你在用图书馆吗？有用吗？如果有，我会发布一个答案。设置操作和使用

去盎司

库是一项繁琐的任务，现在已经是凌晨1点了here@AlexMA强调。js@Saksham我想防止快速API调用。