【Vuex】mapGetters, mapMutations, mapActions

コンポーネント側での記述を簡略化できる。

mapGetters

import { mapGetters } from 'vuex';
 
export default {
    computed: {
         ...mapGetters(['doneTodosCount','anotherGetter' ])
         // doneTodosCount() { return this.$store.getters.doneTodosCount; },
         // anotherGetter() { return this.$store.getters.anotherGetter; }と同義
    }
}

mapMutations

<button @click="increment(2)"></button>

import { mapMutations } from 'vuex';
 
export default {
    method: {
        ...mapMutations(['increment','decrement'])
        // increment() { this.$store.commit('increment', 2); }と同義
    }
}

mapActions

<button @click="increment(2)"></button>

import { mapActions } from 'vuex';
 
export default {
    method: {
        ...mapActions(['increment','decrement'])
        // increment() { this.$store.dispatch('increment', 2); }と同義
    }
}