Vuej와 Vuex를 사용하여 품목 가격을 합산하여 총 가격을 표시하는 방법

Vuej와 Vuex를 사용하여 품목 가격을 합산하여 총 가격을 표시하는 방법

질문에도 있듯이.저도 그렇게 하고 싶은데 어떻게 해야 할지 모르겠어요.Cart View에서 getter로 사용할 수 있도록 vuex에서 코드를 작성하는 방법을 알려주시면 감사하겠습니다.또한 사용자가 선택한 제품의 총 가격을 확인할 수 있도록 합니다.저는 단지 제품의 가격이 합산되어 제대로 표시되는지 확인하고 싶습니다.고마워요.

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

당신이 getter에 대한 getTotal 참조를 사용했기 때문에, 제가 정리한 것이 있습니다.이것은 가정하고 있습니다.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, 0);
  }
},

언급URL : https://stackoverflow.com/questions/63604901/how-to-use-vuejs-and-vuex-to-add-up-item-prices-together-and-display-total-price