Question

Lodash 的 debounce 和 vue3

2023-01-14

621

vue.js vuejs3 lodash pinia

我在使用 lodash 和 vue3 的 debounce 时遇到了问题，您能帮我找出此代码中的问题吗？

Pinia's Store

actions: {
    fetchUsers(targetAppId?: string) {
      this.loading = true;
      AppsService.getUsers(targetAppId)
        .then(response => {
          this.users = response.data.users
          // This statement works without debounce
          debounce(() => { this.loading = false }, 1000)
        })
    },
  }

Answer 1

这永远不会按照您希望的方式工作。

就像 sifriday 所说的那样， debounce 返回一个（新）函数，您需要重新调用该函数才能正确工作去抖动。但在您的商店中，您有一个匿名函数，因此没有实际去抖动它的参考。

您可以添加 loading 状态，然后在 commit 上执行去抖动以切换此状态，或者将操作本身包装在去抖动中。