web-dev-qa-db-fra.com

Vuex getter ne se met pas à jour

J'ai le getter ci-dessous:

withEarmarks: state => {
    var count = 0;
    for (let l of state.laptops) {
        if (l.earmarks.length > 0) {
            count++;
        }
    }
  return count;
}

Et dans un composant, cette propriété calculée dérivée de ce getter:

    withEarmarks() { return this.$store.getters.withEarmarks; },

La valeur renvoyée est correcte, jusqu'à ce que je modifie un élément dans le tableau des ordinateurs portables, puis le getter ne se met pas à jour.

vue.jsvuex
31
daninthemix

Dans ton cas state.laptops.earmarks est un tableau, et vous le manipulez par son index de tableau state.laptops[index]. Vue ne peut pas réagir aux mutations sur les tableaux d'état (par index). La documentation fournit 2 solutions pour cela:

// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)

// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)

Bien que cela soit documenté, je pense qu'un panneau lumineux néon géant sur cette page qui dit "Vous perdrez des heures de productivité si vous ne le savez pas" serait un ajout intéressant .

Vous pouvez en savoir plus sur cette "mise en garde" ici: https://vuejs.org/v2/guide/list.html#Caveats

70
jpschroeder