From 97f8e328ca1e3a8093e89879ac702e3020a44f27 Mon Sep 17 00:00:00 2001
From: fantasticbin <fantasticbin@vip.qq.com>
Date: Mon, 20 Jun 2022 18:28:23 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=95=86=E5=93=81=E6=94=BE?=
 =?UTF-8?q?=E5=85=A5=E8=B4=AD=E7=89=A9=E8=BD=A6=E7=9A=84=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=96=B9=E5=BC=8F=EF=BC=8C=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?data=E4=B8=8Ewatch=E7=9B=91=E5=90=AC=E6=9D=A5=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProductList.vue | 55 +++++++++++++++++++++++-----------
 src/store/modules/cart.js      | 22 +++++---------
 src/store/modules/products.js  |  9 ++----
 3 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/ProductList.vue b/src/components/ProductList.vue
index f6a4c1b..1615235 100644
--- a/src/components/ProductList.vue
+++ b/src/components/ProductList.vue
@@ -5,11 +5,11 @@
       :key="product.id">
       {{ product.title }} - {{ product.price }} x {{ product.inventory }}
       <br>
-      <el-input-number v-if="product.inventory" :min="1" :max="product.inventory" v-model="preSelectProducts[product.id]" />
+      <el-input-number v-if="product.inventory" :min="1" :max="product.inventory" v-model="numbers[product.id]" />
       <el-input-number v-else :disabled="true" />
       <el-button
         :disabled="!product.inventory"
-        @click="addProductToCart({ product: product, num: preSelectProducts[product.id] })">
+        @click="addProductToCart(product)">
         加入购物车
       </el-button>
     </li>
@@ -17,30 +17,51 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 import { ElButton } from 'element-plus'
 
 export default {
-  components: { ElButton },
-  computed: {
-    ...mapState({
-      products: state => state.products.all,
-      preSelectProducts: state => state.cart.preSelectProducts
-    })
+  data () {
+    return {
+      numbers: {}
+    };
   },
+  components: { ElButton },
+  computed: mapState({
+    products: state => state.products.all,
+  }),
   // computed: {
   //   products(){
   //     return this.$store.state.products.all
   //   }
   // },
-  methods: mapActions('cart', [
-    'addProductToCart'
-  ]),
-  // methods: {
-  //   addProductToCart(product){
-  //     this.$store.dispatch('cart/addProductToCart', product)
-  //   }
-  // },
+  watch: {
+    products: {
+      handler: function (val) {
+        val.forEach(product => {
+          if (this.numbers[product.id] === undefined) {
+            // this.$set(this.numbers, product.id, 1);
+            // Vue 3 已不再需要动态设置数据属性绑定了
+            this.numbers[product.id] = product.inventory ? 1 : 0;
+          }
+        });
+      },
+      // 添加 immediate: true 后该回调将会在侦听开始之后被立即调用
+      immediate: true
+    }
+  },
+  // methods: mapActions('cart', [
+  //   'addProductToCart'
+  // ]),
+  methods: {
+    addProductToCart(product){
+      this.numbers[product.id] = this.numbers[product.id] < 1 ? 1 : this.numbers[product.id];
+      this.numbers[product.id] = this.numbers[product.id] > product.inventory ? product.inventory : this.numbers[product.id];
+
+      this.$store.dispatch('cart/addProductToCart', { product, number: this.numbers[product.id] });
+      this.numbers[product.id] = 1;
+    }
+  },
   created () {
     this.$store.dispatch('products/getAllProducts');
   }
diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js
index 8b5d43f..97f1814 100644
--- a/src/store/modules/cart.js
+++ b/src/store/modules/cart.js
@@ -6,8 +6,6 @@ import { CART, PRODUCTS } from '../mutation-types'
 const state = {
   // 购物车商品列表数据
   items: [],
-  // 用于存放要加入购物车的商品跟数量的对应关系
-  preSelectProducts: {},
   // 标记购买状态
   checkoutStatus: null
 }
@@ -50,37 +48,33 @@ const actions = {
     )
   },
 
-  addProductToCart ({ state, commit }, { product, num} ) {
-    num = num < 1 ? 1 : num;
-    num = num > product.inventory ? product.inventory : num;
+  addProductToCart ({ state, commit }, { product, number} ) {
     commit(CART.SET_CHECKOUT_STATUS, null)
-
     if (product.inventory > 0) {
       const cartItem = state.items.find(item => item.id === product.id)
       if (!cartItem) {
-        commit(CART.PUSH_PRODUCT_TO_CART, { id: product.id, num: num })
+        commit(CART.PUSH_PRODUCT_TO_CART, { id: product.id, number: number })
       } else {
-        commit(CART.INCREMENT_ITEM_QUANTITY, { id: cartItem.id, num: num })
+        commit(CART.INCREMENT_ITEM_QUANTITY, { id: cartItem.id, number: number })
       }
       // remove 1 item from stock
-      commit(`products/${PRODUCTS.DECREMENT_PRODUCT_INVENTORY}`, { id: product.id, num: num }, { root: true })
-      state.preSelectProducts[product.id] = 1;
+      commit(`products/${PRODUCTS.DECREMENT_PRODUCT_INVENTORY}`, { id: product.id, number: number }, { root: true })
     }
   }
 }
 
 // mutations
 const mutations = {
-  [CART.PUSH_PRODUCT_TO_CART] (state, { id, num }) {
+  [CART.PUSH_PRODUCT_TO_CART] (state, { id, number }) {
     state.items.push({
       id,
-      quantity: Number(num)
+      quantity: Number(number)
     })
   },
 
-  [CART.INCREMENT_ITEM_QUANTITY] (state, { id, num }) {
+  [CART.INCREMENT_ITEM_QUANTITY] (state, { id, number }) {
     const cartItem = state.items.find(item => item.id === id)
-    cartItem.quantity += Number(num)
+    cartItem.quantity += Number(number)
   },
 
   [CART.SET_CART_ITEMS] (state, { items }) {
diff --git a/src/store/modules/products.js b/src/store/modules/products.js
index 8921af4..3a1544d 100644
--- a/src/store/modules/products.js
+++ b/src/store/modules/products.js
@@ -12,11 +12,8 @@ const getters = {}
 
 // actions
 const actions = {
-  getAllProducts ({ commit, rootState }) {
+  getAllProducts ({ commit }) {
     shop.getProducts(products => {
-      for (let product of products) {
-        rootState.cart.preSelectProducts = Object.assign({}, rootState.cart.preSelectProducts, { [product.id]: 1 });
-      }
       commit(PRODUCTS.SET_PRODUCTS, products)
     })
   }
@@ -28,9 +25,9 @@ const mutations = {
     state.all = products
   },
 
-  [PRODUCTS.DECREMENT_PRODUCT_INVENTORY] (state, { id, num }) {
+  [PRODUCTS.DECREMENT_PRODUCT_INVENTORY] (state, { id, number }) {
     const product = state.all.find(product => product.id === id)
-    product.inventory -= Number(num)
+    product.inventory -= Number(number)
   }
 }