Vuex 러닝 가이드북

구매

마무리로 쇼핑 카트에 있는 아이템을 사용자가 구매하고 종료하는 구매할 수 있어야 합니다.

  • 도서 재고가 있는지 확인
  • 지불 프로세서와 인터랙션
  • 쇼핑 카트 비우기
  • 구매 성공/실패 여부를 사용자에게 알림

buyBooks 메서드

buyBooks 메서드는 쇼핑 카트에 있는 아이템 구매를 시뮬레이션 하는 메서드입니다. 0.3초 지연된 시간을 가진 후, 랜덤으로 구매 성공 또는 실패 콜백 함수를 실행합니다.







 
 
 
 
 
 
 


// api/shop.js

export default {
  getBooks (cb) {
    window.setTimeout(() => cb(_books), 400)
  },
  buyBooks (products, cb, errorCb) {
    window.setTimeout(() => {
      (Math.random() > 0.5 || navigator.userAgent.indexOf('PhantomJS') > -1)
        ? cb()
        : errorCb()
    }, 300)
  }
}

액션 > 뮤테이션 > 스테이트

구매 API는 지연된 시간 이후에 처리되므로 액션을 통해 뮤테이션을 실행하여, 스테이트를 변경해야 합니다.





 



 
 
 
 
 
 
 
 
 
 
 




 
 
 
 
 
 


// store/index.js

state: {
  // ...
  purchageStatus: '', // [1]
},
actions: {
  // ...
  purchage({state, commit}) {
    shop.buyBooks(
      state.cart, // [2]
      () => { // [3]
        commit('emptyCart');
        commit('notifyStatus', '성공');
      },
      () => { // [4]
        commit('notifyStatus', '실패');
      }
    )
  }
},
mutations: {
  // ...
  emptyCart(state) { // [5]
    state.cart = [];
  },
  notifyStatus(state, status) { // [6]
    state.purchageStatus = status;
  }
}
  1. 화면에 표시할 '구매 상태'
  2. buyBooks 메서드에 전달할 첫번째 인자 (cart 스테이트)
  3. 구매 성공 시, 콜백되는 함수
    ∙ 쇼핑 카트 비우기
    ∙ 사용자에게 '구매 성공' 알림
  4. 구매 실패 시, 콜백되는 함수
    ∙ 사용자에게 '구매 실패' 알림
  5. 쇼핑 카트 비우는 뮤테이션
  6. 구매 상태 알림 변경 뮤테이션

ShoppingCart 컴포넌트

ShoppingCart 컴포넌트 템플릿에 구매 버튼과 구매 상태를 표시할 마크업을 추가합니다.










 





 
 
 

<!-- components/ShoppingCart.vue -->

<table>
  <!-- ... -->
  <tfoot>
    <tr>
      <th>총계</th>
      <td>{{total | won}}</td>
      <td>
        <button type="button" @click="purchageBooks">구매</button>
      </td>
    </tr>
  </tfoot>
</table>

<div class="notify-status" v-if="$store.state.purchageStatus">
  <p>{{ $store.state.purchageStatus }}</p>
</div>

구매를 처리할 메서드를 정의하고, 스토어에 구매(purcahge) 디스패치 합니다.




 
 
 


// components/ShoppingCart.vue

methods: {
  purchageBooks() {
    this.$store.dispatch('purchage');
  }
},

개발 도구 Vuex 확인

쇼핑 카트의 버튼을 클릭해 구매를 수행하면 구매 성공 시 카트를 비우고, 성공 상태를 처리하는 emptyCart, notifyStatus 뮤테이션이 실행되었음을 확인할 수 있습니다.

← 동적 Vuex 게터 →