vuex 장바구니 구현

참고한 게시물 >

https://xn--xy1bk56a.run/vuex/3-cart/#%EC%95%A1%EC%85%98-%EC%B6%94%EA%B0%80

 

1. 장바구니 기능 구현

** 컴포넌트 폴더 구조 **

Vuex (store/index.js)
장바구니 담기 버튼과 메서드 (ProductPage.vue)	장바구니 뷰 (AddedProductList.vue)

 

** 장바구니 관련 버튼 기능 **

'+ 버튼' 클릭시	'- 버튼' 클릭시
product의 inventory -1 cartItem의 quantity +1 cartItem의 itemtotalprice + 상품가격	product의 inventory +1 cartItem의 quantity -1 cartItem의 itemtotalprice - 상품가격
총합계 = 카트에 담긴 상품의 총 가격

 

1) 스토어에 state, actions, mutations, getters 추가(store/index.js)

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

Vue.use(Vuex)

export const store = new Vuex.Store({
    // 스토어 객체 옵션 설정
    state: {
        products: [
            {
                id: 0,
                title: "강아지 사료",
                description: "수제 강아지 사료입니다.",
                price: 15000,
                img: "../assets/images/dogfood.jpg",
                inventory: 10,
            },
            {
                id: 1,
                title: "고양이 사료",
                description: "수제 고양이 사료입니다.",
                price: 20000,
                img: "../assets/images/dogfood.jpg",
                inventory: 10,
            },
            {
                id: 2,
                title: "새 사료",
                description: "수제 새 사료입니다.",
                price: 5000,
                img: "../assets/images/dogfood.jpg",
                inventory: 1,
            },
            {
                id: 3,
                title: "미어캣 사료",
                description: "수제 미어캣 사료입니다.",
                price: 25000,
                img: "../assets/images/dogfood.jpg",
                inventory: 2,
            },
            {
                id: 4,
                title: "햄스터 사료",
                description: "수제 햄스터 사료입니다.",
                price: 10000,
                img: "../assets/images/dogfood.jpg",
                inventory: 30,
            },
            {
                id: 5,
                title: "거북이 사료",
                description: "수제 거북이 사료입니다.",
                price: 2000,
                img: "../assets/images/dogfood.jpg",
                inventory: 0,
            },
        ],
        cart: [],
    },
   actions: {
        //'+'버튼 클릭 시
        addOrder({state, commit}, product) {
        	//제품의 남은 수량이 있을 경우
            if ( product.inventory > 0 ) { 
                const productItem = state.products.find(item => item.id === product.id);
                const cartItem = state.cart.find(item => item.productId === product.id);
                if (!cartItem) {
                    commit('pushProductToCart', productItem); //추가할 제품이 장바구니의 제품과 일치하지 않을 경우, 장바구니에 새로 추가
                } else {
                    if( product.inventory > 0 ) {
                    	commit('incrementItemQuantity', cartItem); //일치할 경우, 장바구니의 제품 수량을 증가}
                    }
                }
                commit('decrementProductInventory', productItem); //남은 수량 -1
                commit('incrementItemTotalPrice', cartItem); //가격변경
            }
        	//제품의 남은 수량이 없는 경우
            else {
                alert("남은수량 없음");
            }
        },
        //'-'버튼 클릭 시
        subOrder({state, commit}, product) {
        	//장바구니에 담긴 아이템이 있을 경우
            const cartItem = state.cart.find(item => item.productId === product.id);
            if (cartItem.quantity > 0) {
                commit('decrementItemQuantity', cartItem); //장바구니의 제품 수량 -1
                commit('incrementProductInventory', product); //남은 수량 +1
                commit('decrementItemTotalPrice', cartItem); //가격변경
            }
        	//장바구니에 담긴 아이템이 없을 경우
            else {
                alert("장바구니에 담은 수량 없음");
            }
        }
    },
    mutations: {
        //장바구니에 제품을 추가
        pushProductToCart(state, product) { 
            state.cart.push({
                productId: product.id,
                title: product.title,
                price: product.price,
                quantity: 1,
                inventory: product.inventory,
                itemtotalprice: product.price,
            });
        },
        //쇼핑 카트의 아이템 수량 증가
        incrementItemQuantity(state, cartItem) { 
            cartItem.quantity++;
        },
        //쇼핑 카트의 아이템 수량 감소
        decrementItemQuantity(state, cartItem) { 
            cartItem.quantity--;
        },
        // 아이템의 남은 수량 증가
        incrementProductInventory(state, product) { 
            product.inventory++;
        },
        // 아이템의 남은 수량 감소
        decrementProductInventory(state, product) { 
            product.inventory--;
        },
        //가격변경
        incrementItemTotalPrice(state, cartItem) {
            cartItem.itemtotalprice += cartItem.price;
        },
        //가격변경
        decrementItemTotalPrice(state, cartItem) {
            cartItem.itemtotalprice -= cartItem.price;
        },
    },
    getters: {
        getcartProducts(state) {
            return state.cart.map(cartItem => {
                const product = state.products.find(product => product.id === cartItem.productId);
                if(product === undefined) {
                    return {
                        quantity: 0,
                        itemtotalprice: 0,
                    }
                } else return {
                    id: product.id,
                    title: product.title,
                    price: product.price,
                    inventory: product.inventory,
                    quantity: cartItem.quantity,
                    itemtotalprice: cartItem.itemtotalprice,
                };
            });
        },
        getcartProductsthis:(state) => (productItem) => {
            const cartItem = state.cart.find(item => item.productId === productItem.id);
            const product = state.products.find(product => product.id === productItem.id);
            if(cartItem === undefined) {
                return {
                    quantity: 0,
                    itemtotalprice: 0,
                }
            }
            return {
                product : product.title,
                quantity: cartItem.quantity,
                itemtotalprice: cartItem.itemtotalprice,
            };
        },
        cartTotal(state) {
            let total = 0;
            state.cart.forEach(cartItem => {
                total += cartItem.itemtotalprice;
            });
            return total;
        },
    },
})

 

2) 장바구니 담기 버튼과 메서드(ProductPage.vue)

<template>
  <div id="productpage">
    <div id="productsimple">
      <div class="product-img">
        <img src="../assets/images/dogfood.jpg" alt />
      </div>
      <div class="product-simpleinfo">
        <ul>
          <li class="title" v-text="product.title"></li>
          <li class="des" v-text="product.description"></li>
          <li class="price">{{ product.price }}원</li>
        </ul>
        <div>남은 수량 : {{ product.inventory }}개</div>
        <div id="editquantity">
          <button @click="subOrder(product)">-</button>
          <div>
            {{ $store.getters.getcartProductsthis(product).quantity }}
          </div>
          <button @click="addOrder(product)">+</button>
        </div>
        <div class="total">
        	총합계 : {{ $store.getters.getcartProductsthis(product).itemtotalprice }}원
        </div>
      </div>
    </div>

    <div id="productdetail"></div>
  </div>
</template>

<script>
export default {
  name: "ProductPage",
  data() {
    const index = this.$route.params.contentId;
    return {
      product: this.$store.state.products[index]
    };
  },
  methods: {
    addOrder(product) {
      this.$store.dispatch("addOrder", product);
    },
    subOrder(product) {
      this.$store.dispatch("subOrder", product);
    },
  },
};
</script>

 

3) 장바구니 뷰(AddedProductList.vue)

<template>
  <div id="addedproductlist">
    <div>
      <div>
        <div
          v-if="$store.getters.getcartProducts.length === 0"
          class="shopped-item"
        >
          장바구니에 담은 상품이 없습니다.
        </div>
        <div
          v-else
          class="shopped-item"
          :key="index"
          v-for="(cartproduct, index) in $store.getters.getcartProducts"
        >
          <div class="shopped-imgtitle">
            <img src="../assets/images/dogfood.jpg" />
            <div class="shopped-title">{{ cartproduct.title }}</div>
          </div>
          <div id="editquantity">
            <button @click="subOrder(cartproduct)">-</button>
            <div>
              {{ cartproduct.quantity }}
            </div>
            <button @click="addOrder(cartproduct)">+</button>
          </div>
          <div class="shopped-price">
            {{ cartproduct.itemtotalprice }}원
          </div>
        </div>
        <div class="shopped-total">
          총 가격 :  {{ $store.getters.cartTotal }}원
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddedProductList",
  methods: {
    addOrder(cartproduct) {
      this.$store.dispatch("addOrder", cartproduct);
    },
    subOrder(cartproduct) {
      this.$store.dispatch("subOrder", cartproduct);
    }
  },
};
</script>

 

2. 장바구니 기능 테스트

1) ProductPage.vue

• +-버튼 클릭 전

  

• +-버튼 클릭한 후

  

2) AddedProductList.vue

장바구니에 있는 카트목록을 보면 담긴 상품들을 확인하거나 상품 개수를 조절할 수 있다!