购物车功能通过store的actions和getters实现：增（addtocart查重合并）、删（removeitem/clearcart）、改（updatequantity/toggleitemselect）、查（getters实时计算）。

增：添加商品并自动去重或合并数量

在购物车 store 的 actions 中实现 addToCart(product)，核心逻辑是先查重再处理：

• 用 find() 检查商品是否已存在（通常按 id 或 skuId 判断）
• 存在则只更新 quantity += 1，不重复 push
• 不存在则新建对象加入 cartItems.push({ id, name, price, quantity: 1 })
• 可额外校验库存（如 product.inventory > 0），避免超卖

删：按 ID 删除单个商品或清空全部

提供两个粒度的删除动作，都通过 actions 封装：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• removeItem(id)：用 findIndex() 定位后 splice() 删除
• clearCart()：直接赋值空数组 this.cartItems = []，简洁高效
• 若需确认弹窗或撤回功能，可在 action 内部加状态标记（如 isDeleting: true），组件中监听响应

改：调整数量、同步库存、联动选中状态

修改不是直接改 state 字段，而是统一走 action，保证可追踪和副作用可控：

• updateQuantity(id, delta)：支持 +1/-1 或设为指定值，含边界判断（如最小为 1，减到 0 时自动 removeItem）
• 若商品有库存字段，可在 action 中同步更新 product.inventory -= delta（前提是该 product 引用来自 productStore）
• 全选/单选联动时，用 toggleItemSelect(id) 修改 item.selected，再通过 getter 计算 isAllSelected

查：用 getters 实时计算，不写冗余逻辑

所有读取类逻辑交给 getters，自动响应式且不触发副作用：

• totalItems：用 reduce 累加 quantity
• totalPrice：遍历并累加 price * quantity，可支持折扣字段参与计算
• selectedItems：返回 cartItems.filter(i => i.selected)
• isEmpty：直接 return this.cartItems.length === 0