How to display data from the Vuex store

Question

I am storing my data in Vuex as you see in the picture:

And product object is like this:

My aim is to get the variation '1' and find it in the product object and display the price_excl_vat.

So here is my mutations file:

export const ADD_TO_CART = (state, {product, variation, amount}) => {
    let productInCart = state.cart.find(item => {
        return item.product.id === product.id;
    });
    if(productInCart) {
        productInCart.amount += amount;
        return;
    }
    state.cart.push({
        product,
        variation,
        amount
    })
}

And Cart component:

<template>
    <div
        class="dropdown-menu cart"
        aria-labelledby="triggerId"
    >
        <div v-if="cart.length != 0" class="inner-cart">
            <div v-for="item in cart" :key="item.product.id">

                <div class="cart-items">
                    <div>
                        <strong>{{ item.product.attributes.name }}</strong>
                        <br/> {{ item.amount }} x € //price needs to be here
                    </div>
                    <div>
                        <a class="remove" @click.prevent="removeProductFromCart(item.product)">Remove</a>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="cart-items-total">
                <span>Total: {{cartTotalPrice}}</span>
                <a href="#" @click.prevent="clearCartItems()">Clear Cart</a>
            </div>
            <hr/>
            <router-link :to="{name: 'order'}" class="btn button-secondary">Go To Cart</router-link>
        </div>
        <div v-else class="inner-cart">
            <div class="cart-items no-item">
                <i class="fas fa-frown-open"></i>
                <div class="text">ES BEFINDEN SICH KEINE PRODUKTE IM WARENKORB.</div>
            </div>
            <hr/>
            <router-link :to="{name: 'alle-tickets'}" class="btn button-secondary">ALL TICKETS</router-link>
        </div>
    </div>
</template>

<script>

export default {
    computed: {
        cart() {
            return this.$store.state.cart;
        },
        cartTotalPrice() {
            return this.$store.getters.cartTotalPrice;
        }
    },
    mounted() {
        this.$store.dispatch('getCartItems')
    }
};
</script>

The question might be long a bit and I am new to Vuex, so if you can help me with this I would be really glad. And let me know if you have more details.

Answer 1

Maybe this will help you.

You could define a getter in your store like so:

getters: {
  getVariation: (state) => (variationNumber) => {
    return state.cart.find((item) => item.variation === variationNumber);
  }
}

Than in your component you can need is to call your getter like this:

this.$store.getters.getVariation(1);

---

EDIT:

Or this is more want you was looking for.

getters: {
  getVariation: (state) => (id) => {
    let product = state.cart.find((item) => item.variation === id).product;
    return product.variations.find((variation) => variation.id === id);
  }
}

this.$store.getters.getVariation(1).price_excl_vat;

I hope this is what you want achieve and my explanation is clear enough.

Cheers