调整商品放入购物车的数量实现方式，通过data与watch监听来实现

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 },
+  data () {
-  computed: {
+    return {
-    ...mapState({
+      numbers: {}
-      products: state => state.products.all,
+    };
-      preSelectProducts: state => state.cart.preSelectProducts
-    })
   },
+  components: { ElButton },
+  computed: mapState({
+    products: state => state.products.all,
+  }),
   // computed: {
   //   products(){
   //     return this.$store.state.products.all
   //   }
   // },
-  methods: mapActions('cart', [
+  watch: {
-    'addProductToCart'
+    products: {
-  ]),
+      handler: function (val) {
-  // methods: {
+        val.forEach(product => {
-  //   addProductToCart(product){
+          if (this.numbers[product.id] === undefined) {
-  //     this.$store.dispatch('cart/addProductToCart', product)
+            // 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');
   }

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} ) {
+  addProductToCart ({ state, commit }, { product, number} ) {
-    num = num < 1 ? 1 : num;
-    num = num > product.inventory ? product.inventory : num;
     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 })
+      commit(`products/${PRODUCTS.DECREMENT_PRODUCT_INVENTORY}`, { id: product.id, number: number }, { root: true })
-      state.preSelectProducts[product.id] = 1;
     }
   }
 }
 
 // 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 }) {

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)
   }
 }