Mapping Actions & Getters

Mapping Actions & Getters

Writing this.$store.getters.x and this.$store.dispatch('y') everywhere gets repetitive. Vuex provides map helpers that generate computed properties and methods automatically, reducing boilerplate.

mapGetters

import { mapGetters } from 'vuex';

export default {
    computed: {
        // Without mapGetters:
        // saleProducts() { return this.$store.getters.saleProducts; },
        // productCount() { return this.$store.getters.productCount; },

        // With mapGetters:
        ...mapGetters([
            'saleProducts',
            'productCount',
            'totalPrice'
        ])
    }
};

mapGetters generates computed properties that return this.$store.getters.name. The spread operator (...) merges them into the computed object alongside any local computed properties.

mapActions

import { mapActions } from 'vuex';

export default {
    methods: {
        // Without mapActions:
        // reducePrice() { this.$store.dispatch('reducePrice', 4); }

        // With mapActions:
        ...mapActions([
            'reducePrice'
        ])
    }
};

<!-- In the template, pass the payload as an argument -->
<button @click="reducePrice(4)">Reduce Prices</button>

mapActions generates methods that call this.$store.dispatch(). The template can pass the payload directly as an argument.

Renaming with Object Syntax

computed: {
    ...mapGetters({
        products: 'saleProducts',      // this.products → getters.saleProducts
        count: 'productCount'          // this.count → getters.productCount
    })
},
methods: {
    ...mapActions({
        reduce: 'reducePrice'          // this.reduce(4) → dispatch('reducePrice', 4)
    })
}

The object syntax lets you rename getters and actions to avoid naming conflicts or use more descriptive names in your component.

Mapping Mutations

import { mapMutations } from 'vuex';

methods: {
    ...mapMutations([
        'reducePrice'   // this.reducePrice(4) → commit('reducePrice', 4)
    ])
}

All Map Helpers

Helper	Maps To	Used In
mapState	this.$store.state.x	computed
mapGetters	this.$store.getters.x	computed
mapMutations	this.$store.commit('x')	methods
mapActions	this.$store.dispatch('x')	methods

Complete Example

import { mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapGetters([
            'saleProducts',
            'productCount'
        ]),
        // You can still have local computed properties
        greeting() {
            return 'Welcome to the store!';
        }
    },
    methods: {
        ...mapActions([
            'reducePrice'
        ]),
        // And local methods
        logSomething() {
            console.log('Local method');
        }
    }
};

Series Summary

You have now learned the complete Vuex pattern:

┌─────────────────────────────────────────────┐
│                 Vuex Store                  │
│                                             │
│  State ←── Mutations ←── Actions            │
│    │                        ↑               │
│    └── Getters              │               │
│         │                   │               │
└─────────┼───────────────────┼───────────────┘
          ↓                   │
     ┌─────────┐         ┌───────┐
     │computed  │         │methods│
     │properties│         │       │
     └────┬────┘         └───┬───┘
          ↓                   ↑
      Template ──(events)─────┘

Key Takeaways

• mapGetters and mapActions eliminate repetitive this.$store boilerplate
• Use the array syntax for simple mapping; object syntax to rename
• Spread them into computed (getters/state) and methods (actions/mutations)
• All four helpers: mapState, mapGetters, mapMutations, mapActions
• The complete Vuex flow: Component → Action → Mutation → State → Component