如何显示来自 Vuex 存储的数据

Question

如图所示，我将数据存储在 Vuex 中：

产品对象是这样的：

我的目标是获取变体“1”并在产品对象中找到它并显示 price_excl_vat。

这是我的突变文件：

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
    })
}

还有购物车组件：

<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>

这个问题可能有点长，而且我是 Vuex 的新手，所以如果你能帮我解决这个问题，我会很高兴。如果您有更多详细信息，请告诉我。

Answer 1

也许这会对你有所帮助。

您可以像这样在商店中定义一个 getter：

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

在您的组件中，您可能需要像这样调用您的 getter：

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

---

编辑：

或者这是你想要的更多。

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;

我希望这是您想要实现的，并且我的解释足够清楚。

干杯