Wie Sie sich richtig Vue JS Uhr mit lodash debounce

Question

verwende ich lodash bin mit wie so eine Entprellfunktion auf einer Komponente zu nennen:

... 
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 
     } 
    } 
} 

• Ausgabe 1 ist, dass meine Methode checkSearchStr nicht kennt foo
• Ausgabe 2 ist, dass mein Geschäft undefined auch
ist

Warum meine Methode wissen this nicht, wenn durch 01 genannt? Und was ist die richtige Verwendung?

Answer 1

Ihre Uhr sollte so aussehen.

watch: { 
    searchStr: _.debounce(function(newVal){ 
     this.checkSearchStr(newVal) 
    }, 100) 
}, 

Dies ist ein bisschen ungewöhnlich, jedoch. Ich verstehe nicht, warum du eine Uhr enthüllen willst. Möglicherweise möchten Sie lieber nur die checkSearchStr Methode entprellen.

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

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

Eine andere Sache möchte ich hervorheben; Nein, wo im Code ist searchStr definiert. Wenn Sie einen Wert mit Vue ansehen, beobachten Sie eine Daten oder eine berechnete Eigenschaft. Wie Sie es gerade definiert haben, wird die Uhr unter searchStr niemals ausgeführt.