Getters

Getters

In the previous episode, each component created its own computed properties to derive values from state. If multiple components need the same derived value, you would duplicate the logic. Getters solve this — they are computed properties defined in the store, available to all components.

Defining Getters

// store/store.js
export const store = new Vuex.Store({
    state: {
        products: [
            { id: 1, name: 'Banana Skin', price: 20 },
            { id: 2, name: 'Shiny Star', price: 40 },
            { id: 3, name: 'Green Shells', price: 60 },
            { id: 4, name: 'Red Shells', price: 80 },
            { id: 5, name: 'Mushroom', price: 15 }
        ]
    },
    getters: {
        saleProducts(state) {
            return state.products.map(product => {
                return {
                    ...product,
                    price: product.price / 2
                };
            });
        },
        productCount(state) {
            return state.products.length;
        },
        totalPrice(state) {
            return state.products.reduce((total, p) => total + p.price, 0);
        }
    }
});

Each getter receives state as its first argument. Getters can also receive other getters as a second argument.

Getters That Use Other Getters

getters: {
    productCount(state) {
        return state.products.length;
    },
    averagePrice(state, getters) {
        return getters.totalPrice / getters.productCount;
    }
}

Accessing Getters in Components

computed: {
    saleProducts() {
        return this.$store.getters.saleProducts;
    },
    productCount() {
        return this.$store.getters.productCount;
    }
}

Using in the Template

<template>
    <div>
        <h2>Sale Products (50% off!)</h2>
        <div v-for="product in saleProducts" :key="product.id">
            <span>{{ product.name }} — ${{ product.price }}</span>
        </div>
        <p>Total items: {{ productCount }}</p>
    </div>
</template>

Getters vs Component Computed

Feature	Store Getters	Component Computed
Where defined	In the Vuex store	In the component
Accessible from	Any component via this.$store.getters	Only the component where defined
Use when	Multiple components need the same derived value	Only this component needs the value
Cached	Yes — based on state dependencies	Yes — based on reactive dependencies

Key Takeaways

• Getters are the store's computed properties — derived values from state
• They receive state (and optionally getters) as arguments
• Access them with this.$store.getters.getterName
• Use getters when multiple components need the same derived data — avoids duplication