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

Posted 2023-02-16

【中文标题】如何显示来自 Vuex 存储的数据

【英文标题】：How to display data from the Vuex store

【发布时间】：2021-12-03 12:34:17

【问题描述】：

如图所示，我将数据存储在 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 的新手，所以如果你能帮我解决这个问题，我会很高兴。如果您有更多详细信息，请告诉我。

【参考方案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;

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

干杯

【讨论】：

Getter Documentation

@Lars 首先感谢您的回答。我正在尝试应用第二个，因为它适合我的位置。但是我收到了这个错误：“TypeError: Cannot read properties of undefined (reading 'find')” found in

另外，为了更清楚地说明我想要做的是返回产品内部的变体，因为产品内部可能有几个变体，如果有变体，我想显示 price_excl_vat状态的在 product.attributes.variations

您在哪一行得到错误？在let product = state.cart.find((item) => item.variation === id).product; 或product.variations.find((variation) => variation.id === id)？

也许你可以分享一个 vue codepen？