Reactive getter in vuex?

user_7477397 0
Viewed 23785

I have getter in vuex which returns item from list

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
    },
    mutations: {
        setArrItemName(state, id, name) {
            Vue.set(state.arr, id, name);
        }
    },
    getters: {
        arrItemById(state, getters) => (id) => {
            const item = state.arr[id];
            if(item) return item;
            return {
                 name: 'default', attr: true
            };
        }
    }
})

If I output it in template

{{ $store.state.arr[1]['name'] }}

it updates fine when another part calls

this.$store.commit('setArrItemName', 1, 'new name');

But if template contains

{{ $store.getters.arrItemById(1).name }}

Then it's not updated

Problem: this getter is used in different places and I do not want to duplicate this code

<template v-if='$store.state.arr[id]'>
    {{ $store.state.arr[id].name }}
</template>
    Default
<template v-else>
</template>

If 'default' some day changes, or any other attribute of default object then it should be updated in different places.

vuex vue.js
3 Answers

I don't know if this typo is just in the question, or in your program too...

from above

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
    },
    mutations: {
       ...

should be

const store = new Vuex.Store({
    state: { arr: {
        1: {name: 'one', attr: true},
        2: {name: 'two', attr: false} 
      } // missing this closing brace on object arr
    },
    mutations: {
       ...

That might explain the getter problem.

user_47162450
Related