Update shopping cart example (#1225)

* remove getters that return a piece of the state as is

* make namespaced modules

* rename cart's `added` prop to `items`

examples/shopping-cart/components/ProductList.vue

@@ -13,17 +13,17 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
-  computed: mapGetters({
-    products: 'allProducts'
+  computed: mapState({
+    products: state => state.products.all
   }),
-  methods: mapActions([
+  methods: mapActions('cart', [
     'addProductToCart'
   ]),
   created () {
-    this.$store.dispatch('getAllProducts')
+    this.$store.dispatch('products/getAllProducts')
   }
 }
 </script>

examples/shopping-cart/components/ShoppingCart.vue

@@ -14,19 +14,21 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 export default {
   computed: {
-    ...mapGetters({
+    ...mapState({
+      checkoutStatus: state => state.cart.checkoutStatus
+    }),
+    ...mapGetters('cart', {
       products: 'cartProducts',
-      checkoutStatus: 'checkoutStatus',
       total: 'cartTotalPrice'
     })
   },
   methods: {
     checkout (products) {
-      this.$store.dispatch('checkout', products)
+      this.$store.dispatch('cart/checkout', products)
     }
   }
 }

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

@@ -3,16 +3,14 @@ import shop from '../../api/shop'
 // initial state
 // shape: [{ id, quantity }]
 const state = {
-  added: [],
+  items: [],
   checkoutStatus: null
 }
 
 // getters
 const getters = {
-  checkoutStatus: state => state.checkoutStatus,
-
   cartProducts: (state, getters, rootState) => {
-    return state.added.map(({ id, quantity }) => {
+    return state.items.map(({ id, quantity }) => {
       const product = rootState.products.all.find(product => product.id === id)
       return {
         title: product.title,
@@ -32,7 +30,7 @@ const getters = {
 // actions
 const actions = {
   checkout ({ commit, state }, products) {
-    const savedCartItems = [...state.added]
+    const savedCartItems = [...state.items]
     commit('setCheckoutStatus', null)
     // empty cart
     commit('setCartItems', { items: [] })
@@ -50,14 +48,14 @@ const actions = {
   addProductToCart ({ state, commit }, product) {
     commit('setCheckoutStatus', null)
     if (product.inventory > 0) {
-      const cartItem = state.added.find(item => item.id === product.id)
+      const cartItem = state.items.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 })
+      commit('products/decrementProductInventory', { id: product.id }, { root: true })
     }
   }
 }
@@ -65,19 +63,19 @@ const actions = {
 // mutations
 const mutations = {
   pushProductToCart (state, { id }) {
-    state.added.push({
+    state.items.push({
       id,
       quantity: 1
     })
   },
 
   incrementItemQuantity (state, { id }) {
-    const cartItem = state.added.find(item => item.id === id)
+    const cartItem = state.items.find(item => item.id === id)
     cartItem.quantity++
   },
 
   setCartItems (state, { items }) {
-    state.added = items
+    state.items = items
   },
 
   setCheckoutStatus (state, status) {
@@ -86,6 +84,7 @@ const mutations = {
 }
 
 export default {
+  namespaced: true,
   state,
   getters,
   actions,

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

@@ -6,9 +6,7 @@ const state = {
 }
 
 // getters
-const getters = {
-  allProducts: state => state.all
-}
+const getters = {}
 
 // actions
 const actions = {
@@ -32,6 +30,7 @@ const mutations = {
 }
 
 export default {
+  namespaced: true,
   state,
   getters,
   actions,