Update shopping cart example (#1107)

* use `product` instead of abbreviation

* move `cartProducts` getter to cart module

* create `cartTotalPrice` getter instead of calculating the total in the Cart component

* separate mutations that update the checkoutStatus and the cart items

examples/shopping-cart/components/Cart.vue

@@ -3,8 +3,8 @@
     <h2>Your Cart</h2>
     <p v-show="!products.length"><i>Please add some products to cart.</i></p>
     <ul>
-      <li v-for="p in products">
-        {{ p.title }} - {{ p.price | currency }} x {{ p.quantity }}
+      <li v-for="product in products">
+        {{ product.title }} - {{ product.price | currency }} x {{ product.quantity }}
       </li>
     </ul>
     <p>Total: {{ total | currency }}</p>
@@ -20,13 +20,9 @@ export default {
   computed: {
     ...mapGetters({
       products: 'cartProducts',
-      checkoutStatus: 'checkoutStatus'
-    }),
-    total () {
-      return this.products.reduce((total, p) => {
-        return total + p.price * p.quantity
-      }, 0)
-    }
+      checkoutStatus: 'checkoutStatus',
+      total: 'cartTotalPrice'
+    })
   },
   methods: {
     checkout (products) {

examples/shopping-cart/components/ProductList.vue

@@ -1,11 +1,11 @@
 <template>
   <ul>
-    <li v-for="p in products">
-      {{ p.title }} - {{ p.price | currency }}
+    <li v-for="product in products">
+      {{ product.title }} - {{ product.price | currency }}
       <br>
       <button
-        :disabled="!p.inventory"
-        @click="addToCart(p)">
+        :disabled="!product.inventory"
+        @click="addToCart(product)">
         Add to cart
       </button>
     </li>

examples/shopping-cart/store/getters.js

@@ -1,10 +0,0 @@
-export const cartProducts = state => {
-  return state.cart.added.map(({ id, quantity }) => {
-    const product = state.products.all.find(p => p.id === id)
-    return {
-      title: product.title,
-      price: product.price,
-      quantity
-    }
-  })
-}

examples/shopping-cart/store/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import * as actions from './actions'
-import * as getters from './getters'
 import cart from './modules/cart'
 import products from './modules/products'
 import createLogger from '../../../src/plugins/logger'
@@ -12,7 +11,6 @@ const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Store({
   actions,
-  getters,
   modules: {
     cart,
     products

examples/shopping-cart/store/modules/cart.js

@@ -10,18 +10,41 @@ const state = {
 
 // getters
 const getters = {
-  checkoutStatus: state => state.checkoutStatus
+  checkoutStatus: state => state.checkoutStatus,
+
+  cartProducts: (state, getters, rootState) => {
+    return state.added.map(({ id, quantity }) => {
+      const product = rootState.products.all.find(product => product.id === id)
+      return {
+        title: product.title,
+        price: product.price,
+        quantity
+      }
+    })
+  },
+
+  cartTotalPrice: (state, getters) => {
+    return getters.cartProducts.reduce((total, product) => {
+      return total + product.price * product.quantity
+    }, 0)
+  }
 }
 
 // actions
 const actions = {
   checkout ({ commit, state }, products) {
     const savedCartItems = [...state.added]
-    commit(types.CHECKOUT_REQUEST)
+    commit(types.SET_CHECKOUT_STATUS, null)
+    // empty cart
+    commit(types.SET_CART_ITEMS, { items: [] })
     shop.buyProducts(
       products,
-      () => commit(types.CHECKOUT_SUCCESS),
-      () => commit(types.CHECKOUT_FAILURE, { savedCartItems })
+      () => commit(types.SET_CHECKOUT_STATUS, 'successful'),
+      () => {
+        commit(types.SET_CHECKOUT_STATUS, 'failed')
+        // rollback to the cart saved before sending the request
+        commit(types.SET_CART_ITEMS, { items: savedCartItems })
+      }
     )
   }
 }
@@ -30,7 +53,7 @@ const actions = {
 const mutations = {
   [types.ADD_TO_CART] (state, { id }) {
     state.checkoutStatus = null
-    const record = state.added.find(p => p.id === id)
+    const record = state.added.find(product => product.id === id)
     if (!record) {
       state.added.push({
         id,
@@ -41,20 +64,12 @@ const mutations = {
     }
   },
 
-  [types.CHECKOUT_REQUEST] (state) {
-    // clear cart
-    state.added = []
-    state.checkoutStatus = null
-  },
-
-  [types.CHECKOUT_SUCCESS] (state) {
-    state.checkoutStatus = 'successful'
+  [types.SET_CART_ITEMS] (state, { items }) {
+    state.added = items
   },
 
-  [types.CHECKOUT_FAILURE] (state, { savedCartItems }) {
-    // rollback to the cart saved before sending the request
-    state.added = savedCartItems
-    state.checkoutStatus = 'failed'
+  [types.SET_CHECKOUT_STATUS] (state, status) {
+    state.checkoutStatus = status
   }
 }
 

examples/shopping-cart/store/modules/products.js

@@ -27,7 +27,7 @@ const mutations = {
   },
 
   [types.ADD_TO_CART] (state, { id }) {
-    state.all.find(p => p.id === id).inventory--
+    state.all.find(product => product.id === id).inventory--
   }
 }
 

examples/shopping-cart/store/mutation-types.js

@@ -1,5 +1,4 @@
 export const ADD_TO_CART = 'ADD_TO_CART'
-export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
-export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
-export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
+export const SET_CART_ITEMS = 'SET_CART_ITEMS'
+export const SET_CHECKOUT_STATUS = 'SET_CHECKOUT_STATUS'
 export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'