수량 변경 mutation 적용

client/pages/cart.vue

@@ -61,8 +61,11 @@
                             </label>
                           </div>
                           <div class="sc-action-links">
-                            <select>
-                              <option>Qty: &nbsp;1</option>
+                            <select @change="onChangeQuantity($event, product)">
+                              <option v-for=" i in 10"
+                                :key="i"
+                                :value="i"
+                                :selected="checkQty(product.quantity, i)">Qty: &nbsp; {{ i }}</option>
                             </select>
                             &nbsp;&nbsp;
                             <span>|</span>
@@ -199,6 +202,19 @@ export default {
 
   computed: {
     ...mapGetters(['getCart', 'getCartTotalPrice', 'getCartLength'])
+  },
+  methods: {
+    onChangeQuantity (event, product) {
+      let qty = event.target.value * 1
+      this.$store.commit('changeQty', { product, qty })
+    },
+    checkQty (prodQty, qty) {
+      if (prodQty * 1  === qty * 1) {
+        return true
+      } else {
+        return false
+      }
+    }
   }
 }
 </script>

client/store/index.js

@@ -36,8 +36,23 @@ export const mutations = {
         state.cartLength += product.quantity
       })
     }
+  },
+
+  changeQty (state, { product, qty }) {
+    let cartProduct = state.cart.find(prod => prod._id === product._id )
+    cartProduct.quantity = qty
+
+    state.cartLength = 0
+    if (state.cart.length > 0) {
+      state.cart.map(product => {
+        state.cartLength += product.quantity
+      })
+    }
 
+    let indexOfProduct = state.cart.indexOf(cartProduct)
+    state.cart.splice(indexOfProduct, 1, cartProduct)
   }
+
 }
 
 export const getters = {