adding products to the cart

src/components/ProductList.vue

@@ -6,7 +6,10 @@
         src="https://i.imgur.com/JfPpwOA.gif"
       >
       <ul v-else>
-        <li v-for="product in products">{{product.title}} - {{product.price}}</li>
+        <li v-for="product in products">
+          {{product.title}} - {{product.price}}
+          <button @click="addProductToCart(product)">Add to cart</button>
+        </li>
       </ul>
     </div>
 </template>
@@ -25,6 +28,12 @@
       }
     },
 
+    methods: {
+      addProductToCart (product) {
+        this.$store.dispatch('addProductToCart', product)
+      }
+    },
+
     created () {
       this.loading = true
       this.$store.dispatch('fetchProducts')

src/store/index.js

@@ -5,7 +5,9 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: { // = data
-    products: []
+    products: [],
+    // {id, quantity}
+    cart: []
   },
 
   getters: { // = computed properties
@@ -24,13 +26,40 @@ export default new Vuex.Store({
           resolve()
         })
       })
+    },
+
+    addProductToCart (context, product) {
+      if (product.inventory > 0) {
+        const cartItem = context.state.cart.find(item => item.id === product.id)
+        if (!cartItem) {
+          context.commit('pushProductToCart', product.id)
+        } else {
+          context.commit('incrementItemQuantity', cartItem)
+        }
+        context.commit('decrementProductInventory', product)
+      }
     }
   },
 
   mutations: {
     setProducts (state, products) {
       // update products
       state.products = products
+    },
+
+    pushProductToCart (state, productId) {
+      state.cart.push({
+        id: productId,
+        quantity: 1
+      })
+    },
+
+    incrementItemQuantity (state, cartItem) {
+      cartItem.quantity++
+    },
+
+    decrementProductInventory (state, product) {
+      product.inventory--
     }
   }
 })