如何正确使用Vue JS手表与lodash debounce

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如此

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

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将永远不会执行.

Answer 2

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

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

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