Vuex nie Getter aktualizowania

Question

mam poniżej getter:

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

A w składniku, ta właściwość obliczona pochodzący z tego getter:

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

Zwrócona wartość jest poprawna, dopóki nie zmieni element w tablicy laptopów, a następnie getter nie aktualizuje się.

Answer 1

W twoim przypadku state.laptops.earmarks jest tablicą i manipulujesz nią według jej indeksu tablicy state.laptops[index]. Vue nie jest w stanie reagować na mutacje w tablicach stanów (według indeksu). Dokumentacja zawiera 2 obejścia tego:

// 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) 

Chociaż jest to udokumentowane, myślę olbrzymi neon świecące znak na tej stronie z napisem „Będziesz tracić godzin produktywności jeśli o tym nie wiedzą” byłby miły dodatek.

Możesz przeczytać więcej o tej „zastrzeżenie” tutaj: https://vuejs.org/v2/guide/list.html#Caveats