Vuex getter not updating

Question

I have the below getter:

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

And in a component, this computed property derived from that getter:

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

The value returned is correct, until I change an element within the laptops array, and then the getter doesn't update.

How are you making changes in the `laptops` array, can you include that code. — Saurabh, Nov 29 '16 at 08:17
@saurabh I have tried both these ways: `state.laptops[index] = laptop;` and `state.laptops[index] = Object.assign({}, laptop);` — daninthemix, Nov 29 '16 at 11:03

score 121 · Accepted Answer · answered Jan 25 '17 at 15:41

121

In your case state.laptops.earmarks is an array, and you are manipulating it by its array index state.laptops[index]. Vue is unable to react to mutations on state arrays (by index). The documentation provides 2 workarounds for this:

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

Although it is documented, I'm thinking a giant neon glowing sign on that page that says "You will waste hours of productivity if you don't know this" would be a nice addition.

You can read more about this "caveat" here: https://vuejs.org/v2/guide/list.html#Caveats

answered Jan 25 '17 at 15:41

jpschroeder

5,373
2
28
33

4

`state.laptops = [laptop, ...state.laptops]` – Cas Bloem Sep 08 '18 at 00:09
2

Big fan of this actually. `[laptop, ...state.laptops]` is basically an `unshift` and [...state.laptops, laptop] is a `push`. – jpschroeder Dec 11 '18 at 21:48
I had a similar question in regards to an Object used as a map and changing the properties. Doing a `state.map = _.clone(state.map)` did the trick for me. – Turbo Jan 15 '19 at 20:36
4

This is a nice summary of this issue: > You will waste hours of productivity if you don't know this" – Neal Feb 05 '19 at 21:04
1

"giant neon glowing sign" lol so true. Thx for SO existence. – Tadas V. Feb 03 '21 at 21:39
I'd like to join the "hours of wasted productivity club" – michael hannan Feb 12 '21 at 10:31

score 0 · Answer 2 · answered Aug 18 '20 at 12:40

Apart from the Reactivity issue and Vue caveat, there could be another reason, You've introduced the local variable counter in computed function, You can try using reduce function as given.

withEarmarks: state => {
    return state.laptops.reduce((acc, item) => {
        if(item.earmarks.length > 0){
            acc++;
        }
        return acc;
    }, 0);
}

consider the @jpschroeder's answer in addition of this answer.

Vuex getter not updating

2 Answers2

Linked