Shopping cart example update (#1137)

* reorganise mutations and actions
remove mutation types

* make mutations responsible for updating one piece of the state

* find the items inside the mutations

examples/shopping-cart/components/ProductList.vue

@@ -5,7 +5,7 @@
       <br>
       <button
         :disabled="!product.inventory"
-        @click="addToCart(product)">
+        @click="addProductToCart(product)">
         Add to cart
       </button>
     </li>
@@ -20,7 +20,7 @@ export default {
     products: 'allProducts'
   }),
   methods: mapActions([
-    'addToCart'
+    'addProductToCart'
   ]),
   created () {
     this.$store.dispatch('getAllProducts')

examples/shopping-cart/store/actions.js

@@ -1,9 +0,0 @@
-import * as types from './mutation-types'
-
-export const addToCart = ({ commit }, product) => {
-  if (product.inventory > 0) {
-    commit(types.ADD_TO_CART, {
-      id: product.id
-    })
-  }
-}

examples/shopping-cart/store/index.js

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

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

@@ -1,5 +1,4 @@
 import shop from '../../api/shop'
-import * as types from '../mutation-types'
 
 // initial state
 // shape: [{ id, quantity }]
@@ -34,41 +33,54 @@ const getters = {
 const actions = {
   checkout ({ commit, state }, products) {
     const savedCartItems = [...state.added]
-    commit(types.SET_CHECKOUT_STATUS, null)
+    commit('setCheckoutStatus', null)
     // empty cart
-    commit(types.SET_CART_ITEMS, { items: [] })
+    commit('setCartItems', { items: [] })
     shop.buyProducts(
       products,
-      () => commit(types.SET_CHECKOUT_STATUS, 'successful'),
+      () => commit('setCheckoutStatus', 'successful'),
       () => {
-        commit(types.SET_CHECKOUT_STATUS, 'failed')
+        commit('setCheckoutStatus', 'failed')
         // rollback to the cart saved before sending the request
-        commit(types.SET_CART_ITEMS, { items: savedCartItems })
+        commit('setCartItems', { items: savedCartItems })
       }
     )
+  },
+
+  addProductToCart ({ state, commit }, product) {
+    commit('setCheckoutStatus', null)
+    if (product.inventory > 0) {
+      const cartItem = state.added.find(item => item.id === product.id)
+      if (!cartItem) {
+        commit('pushProductToCart', { id: product.id })
+      } else {
+        commit('incrementItemQuantity', cartItem)
+      }
+      // remove 1 item from stock
+      commit('decrementProductInventory', { id: product.id })
+    }
   }
 }
 
 // mutations
 const mutations = {
-  [types.ADD_TO_CART] (state, { id }) {
-    state.checkoutStatus = null
-    const record = state.added.find(product => product.id === id)
-    if (!record) {
-      state.added.push({
-        id,
-        quantity: 1
-      })
-    } else {
-      record.quantity++
-    }
+  pushProductToCart (state, { id }) {
+    state.added.push({
+      id,
+      quantity: 1
+    })
+  },
+
+  incrementItemQuantity (state, { id }) {
+    const cartItem = state.added.find(item => item.id === id)
+    cartItem.quantity++
   },
 
-  [types.SET_CART_ITEMS] (state, { items }) {
+  setCartItems (state, { items }) {
     state.added = items
   },
 
-  [types.SET_CHECKOUT_STATUS] (state, status) {
+  setCheckoutStatus (state, status) {
     state.checkoutStatus = status
   }
 }

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

@@ -1,5 +1,4 @@
 import shop from '../../api/shop'
-import * as types from '../mutation-types'
 
 // initial state
 const state = {
@@ -15,19 +14,20 @@ const getters = {
 const actions = {
   getAllProducts ({ commit }) {
     shop.getProducts(products => {
-      commit(types.RECEIVE_PRODUCTS, { products })
+      commit('setProducts', products)
     })
   }
 }
 
 // mutations
 const mutations = {
-  [types.RECEIVE_PRODUCTS] (state, { products }) {
+  setProducts (state, products) {
     state.all = products
   },
 
-  [types.ADD_TO_CART] (state, { id }) {
-    state.all.find(product => product.id === id).inventory--
+  decrementProductInventory (state, { id }) {
+    const product = state.all.find(product => product.id === id)
+    product.inventory--
   }
 }
 

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

@@ -1,4 +0,0 @@
-export const ADD_TO_CART = 'ADD_TO_CART'
-export const SET_CART_ITEMS = 'SET_CART_ITEMS'
-export const SET_CHECKOUT_STATUS = 'SET_CHECKOUT_STATUS'
-export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'