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

Question

我正在使用 lodash 在组件上调用去抖功能，如下所示：

...
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？正确的用法是什么？

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

正如@Bert 在评论中提到的 this 范围是 function 的本地范围。因此，要使 this 范围为 data 中的属性，请更改为：

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

Answer 3

在函数内部使用 this 的同时使用 debounce 的正确方法：

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

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

Answer 4

由于它需要调用在外部作用域中定义的方法，去抖函数看起来是 arrow function:

的完美候选者

watch: {
  searchStr: 'checkSearchStr'
},
methods: {
  checkSearchStr: _.debounce(val => {
    // `this` is the component instance (a.k.a. outer `this`)
    console.log(this)

    this.$store.dispatch('someMethod', val); 
  }, 100)
}

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

How to correctly use Vue JS watch with lodash debounce

javascript

vue.js

vuejs2

lodash

vuex