vue.js - vuex 中的响应式(Reactive) setter/getter ？

Question

我在 vuex 中有 getter，它返回列表中的项目

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

尝试使用计算属性来访问您的 getter。首先，从 Vuex 中导入 mapGetters 函数:

import {mapGetters} from 'vuex';

然后，为您想要的 getter 添加计算属性，如下所示:

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

我们在使用 mapGetters 助手的同时使用了展开运算符 ( ... )；您可以阅读更多关于为什么 here 的信息.

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

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