如何正确使用带有 lodash debounce 的 Vue JS 手表

Question

我正在使用 lodash 在组件上调用 debounce 函数，如下所示：

 ...
import _ from 'lodash';

export default {
    store,
    data: () => {
        return {
            foo: "",
        }
    },

    watch: {
        searchStr: _.debounce(this.default.methods.checkSearchStr(str), 100)
    },

    methods: {
        checkSearchStr(string) {
            console.log(this.foo) // <-- ISSUE 1
            console.log(this.$store.dispatch('someMethod',string) // <-- ISSUE 2
        }
    }
}

• 问题1是我的方法 checkSearchStr 不知道 foo
• 问题 2 是我的商店也是 undefined

为什么我的方法在通过 _.debounce 调用时不知道 this ？正确的用法是什么？

原文由 Artur Grigio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的手表应该是这样的。

 watch: {
    searchStr: _.debounce(function(newVal){
      this.checkSearchStr(newVal)
    }, 100)
},

然而，这有点不寻常。我不明白你为什么要让手表去抖动。可能你宁愿只是去抖动 checkSearchStr 方法。

 watch: {
    searchStr(newVal){
      this.checkSearchStr(newVal)
    }
},

methods: {
    checkSearchStr: _.debounce(function(string) {
        console.log(this.foo)
        console.log(this.$store.dispatch('someMethod',string))
    }, 100)
}

我想指出的另一件事；代码中没有 searchStr 已定义。当您使用 Vue 观察一个值时，您正在观察一个数据或计算属性。正如您当前定义的那样，在 searchStr 上的监视将永远不会执行。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

答案和 Vue 文档中显示的所有示例实际上都不是很好，因为您的组件的所有实例都将共享一个 debounce 方法。这意味着，如果您在单个页面上有 2 个组件实例，并且它们都在 100 毫秒窗口内触发 debounced 方法，则只有 2 个组件中的 1 个可以工作。

现在在大多数情况下，这可能没问题，因为它是一个更小众的问题，但如果你确实遇到了这个问题，那么在你的组件 created() 中创建去抖动方法会更安全，因为它是特定于实例的。

   created() {
    this.$watch('checkSearchStr', _.debounce(function(string) {
      console.log(this.foo)
      console.log(this.$store.dispatch('someMethod',string))
    }, 100));
  }

原文由 Zaptree 发布，翻译遵循 CC BY-SA 4.0 许可协议