时间戳

首页 > 解决方案 > 如何使用 Vuejs 和 Vuex 将商品价格相加并显示总价

function - 如何使用 Vuejs 和 Vuex 将商品价格相加并显示总价

问题描述

正如问题所说。这就是我想做的，但我不知道怎么做。如果有人向我展示如何在 vuex 中编写代码，我将不胜感激，这样我就可以将其作为 getter 从购物车视图中提取出来。并确保用户可以看到所选产品的总价。我只是想确保产品的价格加起来并正确显示。谢谢

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

标签： functionvue.jsstatevuex

解决方案

由于您使用了 getTotal 对 getter 的引用，我已经整理了一些东西。这是假设state.cart有一个价格和一个数量字段。这未经测试，但应该可以工作。它使用减少

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, 0);
  }
},

推荐阅读