Vuex Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。

就像计算属性一样，

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

index.js:

StoreComponent.vue:

效果：

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

index.js中添加：

StoreComponent.vue:

意义就是判断store中countPlus是否大于2，返回Boolean值；

效果图：

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

StoreComponent.vue:

<template>
    <div>
        <button @click="increment"> {{count}}</button>
        <button @click="decrement"> {{count}}</button>
        <span> Plus one: {{ countPlus }}</span>
        <span> Length:   {{ countLength}}</span>
        <span> Plus one Length:   {{ countPlusLength}}</span>
        <span> countAndCountPlusCache:   {{ countPCountPlusCache}}</span>
        <span> countAndCountPlusFunc:   {{ countPCountPlusFunc}}</span>
        <div>
            <span> countCache:   {{ countCache}}</span>
            <span> countFunc:   {{ countFunc(12)}}</span>

        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import {mapGetters} from 'vuex';

    export default {
        name: "StoreComponent",
        // computed: {
        //     count() {
        //         return this.$store.state.count;
        //     },
        //
        // },
        computed: {
            countPlusLength() {
                return this.countPlus.toString().length;
            },
            countPCountPlusCache() {
                return this.$store.getters.countCache;
            },
            countPCountPlusFunc() {
                return this.$store.getters.countFunc(2);
            },
            ...mapState({
                count: state => state.count,

                countPlus: 'countPlus',

                countLength(state) {
                    return state.countLength;
                },
            }),
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                'countCache',
                'countFunc',
            ]),
        },
        // computed: mapState([
        //     'count',
        //     'countPlus',
        //     'countLength',
        // ]),
        methods: {
            increment() {
                this.$store.commit('increment');
            },
            decrement() {
                this.$store.commit('decrement');
            },
        }
    }
</script>

<style scoped>

</style>

效果1：

效果2：

如果你想将一个 getter 属性另取一个名字，使用对象形式：

<template>
    <div>
        <button @click="increment"> {{count}}</button>
        <button @click="decrement"> {{count}}</button>
        <span> Plus one: {{ countPlus }}</span>
        <span> Length:   {{ countLength}}</span>
        <span> Plus one Length:   {{ countPlusLength}}</span>
        <span> countAndCountPlusCache:   {{ countPCountPlusCache}}</span>
        <span> countAndCountPlusFunc:   {{ countPCountPlusFunc}}</span>
        <div>
            <span> countCache:   {{ countCa}}</span>
            <span> countFunc:   {{ countFu(12)}}</span>

        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import {mapGetters} from 'vuex';

    export default {
        name: "StoreComponent",
        // computed: {
        //     count() {
        //         return this.$store.state.count;
        //     },
        //
        // },
        computed: {
            countPlusLength() {
                return this.countPlus.toString().length;
            },
            countPCountPlusCache() {
                return this.$store.getters.countCache;
            },
            countPCountPlusFunc() {
                return this.$store.getters.countFunc(2);
            },
            ...mapState({
                count: state => state.count,

                countPlus: 'countPlus',

                countLength(state) {
                    return state.countLength;
                },
            }),
            // 使用对象展开运算符将 getter 混入 computed 对象中
            // ...mapGetters([
            //     'countCache',
            //     'countFunc',
            // ]),


            ...mapGetters({
                // 把 `this.countCa` 映射为 `this.$store.getters.countCache`
                countCa: 'countCache',
                // 把 `this.countFu` 映射为 `this.$store.getters.countFunc`
                countFu: 'countFunc',
            }),
        },
        // computed: mapState([
        //     'count',
        //     'countPlus',
        //     'countLength',
        // ]),
        methods: {
            increment() {
                this.$store.commit('increment');
            },
            decrement() {
                this.$store.commit('decrement');
            },
        }
    }
</script>

<style scoped>

</style>

效果：