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

发布于07月19日

我使用lodash调用组件上的go 盎司函数，如下所示:

...
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
第二个问题是我的store 也有undefined家

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

推荐答案

你的手表应该是这样的.

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查看值时，您正在查看数据或计算(computed)属性.正如您目前所定义的，searchStr上的手表永远不会执行.