Vuex getter is not reactive

I have this kind of getter in vuex module

currentUser: (state) => {
        let user = state.all.find((item) => {
            return item.id == currentUserId;
        });
        return user;
    },

And this kind of binding in component

computed: {
            user() {
                return this.$store.getters.currentUser
            }
        }

Then I mutate user, devtools shows that state is changed but component is not changed.

Why so?

harrysohie

9 years ago

Level 1

I'm not sure if you still have this problem, but this question showed up for me when I was googling an issue I had.

How are you mutating the user? I just had an issue where I was mutating an object in a vuex state array, and it was not updated in the view but would update in the devtools. My problem was that I was updating the object via array[index] = value, which vue cannot detect. See https://vuejs.org/v2/guide/list.html#Caveats.

3 likes

chiko

7 years ago

Level 1

This answer here helped me too!

mattdeclaire

6 years ago

Level 1

For anyone else who arrives here with my same problem, I was trying to use mapState on getters.

// bad
computed: {
   ...mapState([
      'players',
      'currentPlayerID',
      'currentPlayer',
   ]),
}

// good
computed: {
   ...mapState([
      'players',
      'currentPlayerID',
   ]),
   ...mapGetters([
      'currentPlayer',
   ]),
}

Please or to participate in this conversation.