web-dev-qa-db-fra.com

Comment utiliser correctement Vue JS watch with lodash debounce

J'utilise lodash pour appeler une fonction anti-rebond sur un composant comme ceci:

...
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
        }
    }
}
  • Le problème 1 est que ma méthode checkSearchStr ne connaît pas foo
  • Le problème 2 est que mon magasin est également undefined

Pourquoi ma méthode ne connaît-elle pas this lorsqu'elle est appelée via _.debounce? Et quelle est la bonne utilisation?

javascriptvue.jsvuejs2lodashvuex
10
Artur Grigio

Votre montre devrait ressembler à ceci.

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

C'est cependant un peu inhabituel. Je ne vois pas pourquoi tu voudrais rebondir une montre. Peut-être préféreriez-vous simplement rebondir la méthode checkSearchStr.

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

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

Je voudrais souligner une autre chose; aucun où dans le code est searchStr défini. Lorsque vous regardez une valeur avec Vue, vous regardez une donnée ou une propriété calculée. Comme vous l'avez actuellement défini, la surveillance sur searchStr ne s'exécutera jamais.

29
Bert