如何从Vuex store获取数据并展示商品对应规格的price_excl_vat

解决步骤 #

1. 补全Vuex getters逻辑 #

在你的Vuex store的getters配置中新增两个获取价格的方法，分别用于获取单个购物车条目的对应规格单价、计算购物车总价：

// store/getters.js
export default {
  // 传入购物车条目，返回对应规格的不含税单价
  getCartItemPrice: (state) => (cartItem) => {
    const targetSpec = cartItem.product.variations.find(item => item.id == cartItem.variation)
    return targetSpec ? targetSpec.price_excl_vat.toFixed(2) : 0
  },
  // 计算购物车所有商品的总价
  cartTotalPrice: (state, getters) => {
    return state.cart.reduce((sum, item) => {
      return sum + getters.getCartItemPrice(item) * item.amount
    }, 0).toFixed(2)
  }
}

2. 修复购物车加购逻辑（可选，建议修改） #

你当前的ADD_TO_CART mutation只判断了商品ID，没有匹配规格ID，同一个商品的不同规格加购会被错误合并数量，修改逻辑如下：

export const ADD_TO_CART = (state, {product, variation, amount}) => {
    // 同时匹配商品ID和规格ID
    let productInCart = state.cart.find(item => {
        return item.product.id === product.id && item.variation === variation;
    });
    if(productInCart) {
        productInCart.amount += amount;
        return;
    }
    state.cart.push({
        product,
        variation,
        amount
    })
}

3. 修改Cart组件模板 #

把原来注释需要展示价格的位置替换为对应取值逻辑即可：

<br/> {{ item.amount }} x € {{ $store.getters.getCartItemPrice(item) }}

如果需要补全你模板中调用的移除、清空购物车方法，在组件的methods中添加对应逻辑：

export default {
    computed: {
        cart() {
            return this.$store.state.cart;
        },
        cartTotalPrice() {
            return this.$store.getters.cartTotalPrice;
        }
    },
    methods: {
        removeProductFromCart(product) {
            // 匹配对应商品和规格删除，这里对应的mutation你可以自行实现
            this.$store.commit('REMOVE_CART_ITEM', {productId: product.id})
        },
        clearCartItems() {
            this.$store.commit('CLEAR_ALL_CART')
        }
    },
    mounted() {
        this.$store.dispatch('getCartItems')
    }
};

内容的提问来源于stack exchange，提问作者magic bean