Vuex Getter не обновляет

Question

У меня есть ниже геттер:

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

И в компоненте, это вычисленное свойство, производный от этого геттер:

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

Возвращаемое значение является правильным, пока я не изменить элемент в массиве ноутбуков, а затем геттер не обновляет.

Answer 1

В вашем случае state.laptops.earmarks является массивом, и вы манипулируете им индексом массива state.laptops[index]. Vue не может реагировать на мутации в массивах состояний (по индексу). Документация обеспечивает 2 обходные пути для этого:

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

Хотя это документально, я имею в виду гигантский неон светящийся знак на этой странице, которая говорит «Вы будете тратить часы производительности, если вы не знаете, это» было бы хорошим дополнением.

Вы можете прочитать больше об этом «предостережении» здесь: https://vuejs.org/v2/guide/list.html#Caveats