vuex 상품별 리뷰 뷰어

1. 상품별 리뷰 뷰어 구현

1) 스토어에 reviews state 추가(store/index.js)

state: {
  products: [
    {
        id: 0,
        title: "강아지 사료",
    },
    {
      id: 1,
      title: "고양이 사료",
    },
  },
  // reviews 스테이트 추가
  reviews: [
    {
      productId: 0,
      reviewId : 0,
      reviewtitle: "견왈 : 좋아요!",
      reviewer: "조",
      reviewedate: "21.07.19",
    },
    {
      productId: 0,
      reviewId : 1,
      reviewtitle: "개가 싫어해요.",
      reviewer: "김",
      reviewedate: "21.07.19",
    },
    {
      productId: 1,
      reviewId : 2,
      reviewtitle: "고양이가 잘 먹네요!",
      reviewer: "이",
      reviewedate: "21.07.20",
    },
  ],
}

 

2) 리뷰 뷰어(ProductPage.vue)

<template>
  <div id="productpage">
    <div id="productdetail">
      <b-card no-body>
        <b-tabs card>
          <b-tab no-body title="상품설명"></b-tab>
          <b-tab no-body title="상세정보"></b-tab>
          <b-tab title="후기">
            <ul>
              <li><b-icon-check></b-icon-check>상품에 대한 문의를 남기는 공간입니다.</li>
            </ul>
            <!-- 리뷰 뷰어 헤더 -->
            <div class="review-item-header">
              <div class="review-item-producttitle"> 제품명 </div>
              <div class="review-item-reviewetitle"> 제목 </div>
              <div class="review-item-reviewer"> 작성자 </div>
              <div class="review-item-reviewedate"> 작성일 </div>
            </div>
            <!-- /리뷰 뷰어 헤더 -->
            <!-- 리뷰 뷰어 아이템 -->
            <div 
              v-else
              class="review-item"
              v-for="review in $store.getters.getproductReview(product)"
            >
              <div class="review-item-producttitle">{{ product.title }}</div>
              <div class="review-item-reviewetitle">{{ review.reviewtitle }}</div>
              <div class="review-item-reviewer">{{ review.reviewer }}</div>
              <div class="review-item-reviewedate">{{ review.reviewedate }}</div>
            </div>
            <div 
              v-if="$store.getters.getproductReview(product).length === 0"
              class="review-item-none"
            >
              "{{product.title}}"상품에 댓글이 아직 없습니다.
            </div>
            <!-- /리뷰 뷰어 아이템 -->
          </b-tab>
        </b-tabs>
      </b-card>
    </div>
  </div>
</template>

<script>
import EditQuantity from "@/components/EditQuantity.vue";

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

 

3) 스토어에 getters 추가(store/index.js)

getters: {
    getproductReview:(state) => (productItem) => {
        return state.reviews.filter(reviewItem => reviewItem.productId === productItem.id);
    }, 
},

• ProductPage.vue에서 $store.getters.getproductReview(product)로 받은 product인자를 이용해 id를 가져옴.
• reviews 스테이트에서 productId와 product.id가 같은 리뷰를 찾아 필터링하여 반환하는 getters를 작성.

 

2. 결과

- 리뷰가 없는 상품의 리뷰 뷰어 결과

 

- 리뷰가 있는 상품의 리뷰 뷰어 결과