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

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

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

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

2 个答案: