Vuex中的反应性吸气剂？

Question

我在vuex中有吸气剂，它从列表中返回项目

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
            };
        }
    }
})

如果我在模板中输出

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

当另一部分调用时，它更新正常

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

但是如果模板包含

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

然后它没有更新

问题：此getter在不同的地方使用，我不想重复此代码

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

如果“默认”某天发生变化，或者default对象的任何其他属性发生变化，则应在不同位置进行更新。

Answer 1

尝试使用计算的属性来访问您的吸气剂。首先，mapGetters从Vuex 导入函数：

import {mapGetters} from 'vuex';

然后，为所需的吸气剂添加计算的属性，如下所示：

computed: {
    ...mapGetters({
        getterName: 'your-getter-name-in-store'
    })
} 

我们...在使用mapGetters辅助程序时使用散布运算符（）；您可以在此处详细了解原因。

然后，在模板中使用{{ getterName }}。

这也解决了代码重复的问题，因为您无需在this.$store.getters任何地方使用。