☰

Vue JSウォッチをlodash debounceで正しく使用する方法 質問する

tag-icon • tag-icon javascript vue.js vuejs2 lodash vuex
Vue JSウォッチをlodash debounceで正しく使用する方法 質問する

私は 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? 正しい使用法は何ですか?

ベストアンサー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)
}

もう 1 つ指摘したいのは、コードのどこにもsearchStr定義されていないということです。Vue で値を監視する場合、データまたは計算プロパティを監視します。現在定義されているとおり、監視はsearchStr実行されません。

おすすめ記事