购物车功能通过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 封装:
-
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


















