206 Using Mapper Helpers

示例

mapGetters

TheCounter.vue

首先导入mapGetters，然后在computed中映射，最后使用

<template>
    <!-- <h3>{{ finalCounter }}</h3> -->
    <h3>{{ counter }}</h3>
</template>

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

export default {
    computed: {
        // counter() {
        //     return this.$store.getters.finalCounter;
        // },
        
        //...mapGetters(['finalCounter']),
        ...mapGetters({counter: 'finalCounter'}),
        
    },
};
</script>

mapActions

ChangeCounter.vue

<template>
    <!-- <button @click="increment">Add 2</button>
    <button @click="incrementBy({value:10})">Add 10</button> -->
    <button @click="addOne">Add 2</button>
    <button @click="addOneBy({value:10})">Add 10</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    methods:{
        // addOne() {
        //     // this.$store.commit('incrementBy', {value:2});
        //     this.$store.commit({
        //         type: 'incrementBy',
        //         value: 2
        //     });
        // }

        //...mapActions(['increment','incrementBy'])
        ...mapActions({
            addOne: 'increment',
            addOneBy: 'incrementBy'
        })
    }
};
</script>