如何使用Vuejs和Vuex将物品价格加起来并显示总价

如何解决如何使用Vuejs和Vuex将物品价格加起来并显示总价

正如问题所述。那就是我想做的，但是我不确定如何做。 如果有人向我展示了如何在vuex中编写代码，我将不胜感激，这样我就可以从Cart View中将其作为吸气剂使用。并确保用户可以看到所选产品的总价。我只想确保将产品的价格加起来并正确显示。谢谢

我的VUEX代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [],},getters: {
    countOfCartProducts: state => {
      return state.cart.length
    },myCart: state => {
      return state.cart
    },mutations: {
    ADD_TO_CART: (state,product) => {
      state.cart.push(product)
    },REMOVE_FROM_CART: (state,product) => {
      state.cart.splice(product,1)
    }
  },actions: {

  },modules: {
  }
});

购物车视图：

<template>
  <div>
    <main>
      <div class="wrap">
        <div class="contact">
          <h2>
            YOU HAVE <span>{{ countOfCartProducts }}</span> ITEMS IN
            <span>CART</span>
          </h2>
        </div>
      </div>
    </main>

    <div class="cart">
      <div class="item" v-for="(item,index) in myCart" v-bind:key="index">
        <div class="left-item">
          <img :key="item.image" :src="item.image" />
        </div>
        <div class="right">
          <h2>
            {{ item.name
            }}<span class="remove" v-on:click="removeFromCart">X</span>
          </h2>
          <h3>
            Price <span>€{{ item.price }}</span>
          </h3>
        </div>
      </div>
      <div class="total">
        <h3>Total Price: <span>€{{ getTotal }}</span></h3>
      </div>
      <div class="pay-btn">
        <button>PAY NOW</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations(["REMOVE_FROM_CART"]),removeFromCart(item) {
      this.REMOVE_FROM_CART(item);
    },computed: {
    ...mapGetters(["countOfCartProducts"]),...mapGetters(["myCart"]),...mapGetters(["getTotal"]),props: ["product"],data() {
    return {
      cart: [],currentItem: this.$route.params,avaibleProducts: [
        {
          name: "PLASTIC BAGS 3-PACK v1",price: 0.33,image: require("@/assets/plastic-bag-pack.jpg"),id: 1,uuid: "plastic-bag-pack-v001",description:
            "Plastic bags pack containing 3HQ assets. Get yours now.",{
          name: "VINYL TEXTURES 2-PACK v1",price: 0.22,image: require("@/assets/vinyl-texture-pack.jpg"),id: 2,uuid: "vinyl-textures-pack-v001",description:
            "Vinyl textures pack containing 2HQ assets. Get yours now.",{
          name: "STICKER PACK 6-PACK v1",price: 0.66,image: require("@/assets/sticker-bag-pack.jpg"),id: 3,uuid: "sticker-bag-pack-v001",description: "Sticker bag pack containing 6HQ assets. Get yours now.",],computed: {
        showProduct() {
          const id = this.$route.params.id;
          const product = this.avaibleProducts.find((p) => p.uuid == id);
          return product;
        },};
  },};
</script>

<style></style>

解决方法

当您使用getTotal引用getter时，我整理了一些东西。假设state.cart具有价格和数量字段。这未经测试，但应该可以。它使用reduce

getters: {
  getTotal: state => {
    return state.cart.reduce((total,lineItem) => total + (lineItem.quantity * lineItem.price),0);
  }
},

编辑：

尝试使用它，我刚刚注意到您正在添加具有ADD_TO_CART突变的产品对象。

getters: {
  getTotal: state => {
    return state.cart.reduce((total,lineItem) => total + lineItem.price,