Vue3购物车商品数量统计异常问题求助

问题核心 #

添加同一件商品时，购物车实际数量应为2，但页面只显示1，核心原因是购物车条目更新未触发响应式，以及商品数量初始化/修改逻辑错误。

关键修复点（Pinia Store） #

以下是修正后的完整Pinia代码，核心修改3处：

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    cart: [],
  }),
  actions: {
    addToCart(item) {
      const cartItemIndex = this.cart.findIndex(x => x.id === item.id);

      if (cartItemIndex >= 0) {
        // 修改购物车数组内的商品数量，触发Vue响应式更新
        this.cart[cartItemIndex].quantity++;
      } else {
        // 新商品加入时初始化quantity为1，避免修改原商品数据
        this.cart.push({ ...item, quantity: 1 });
      }
    },
    removeFromCart(item) {
      const cartItemIndex = this.cart.findIndex(x => x.id === item.id);

      if (cartItemIndex >= 0) {
        const targetItem = this.cart[cartItemIndex];
        if (targetItem.quantity > 1) {
          // 数量>1时减1，而非直接删除
          targetItem.quantity--;
        } else {
          this.cart.splice(cartItemIndex, 1);
        }
        console.log("Removed from cart");
      }
    },
  },
  getters: {
    cartnum() {
      let total = 0;
      this.cart.forEach(item => total += item.quantity);
      return total;
    },
  },
});

修复细节说明 #

• 错误1：直接修改传入的item：原代码中item.quantity++修改的是源商品数据（而非购物车中的条目），导致购物车数组未更新，Vue无法触发响应式渲染。改为修改this.cart[cartItemIndex].quantity后，购物车条目直接更新，页面会同步显示正确数量。
• 错误2：缺失quantity初始化：从db.json导入的商品默认没有quantity属性，第一次添加时必须手动初始化quantity:1，否则后续累加会出错。用扩展运算符{...item}复制商品数据，避免污染源数据。
• 错误3：删除逻辑不合理：原代码直接删除商品，未考虑数量大于1的情况。修改后优先减少数量，数量为1时再移除，符合常规购物车交互逻辑。

其他组件验证 #

shop.vue和cart.vue的代码无需修改，确保：

• shop.vue中点击按钮调用storeCounter.addToCart(item)
• cart.vue中删除按钮调用storeCounter.removeFromCart(item)

内容的提问来源于stack exchange，提问作者itsbuliaba