vuex 中的反应式吸气剂？

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 对象的任何其他属性发生变化，那么它应该在不同的地方进行更新。

原文由 Jackson J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 import {mapGetters} from 'vuex';

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

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

我们在使用 mapGetters 助手时使用传播运算符（ ... ）；您可以 在此处 阅读有关原因的更多信息。

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

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

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议