购物车商品数量加减需通过vuex/pinia的mutation统一管理，严格校验边界、定位目标项、区分存在/新增逻辑，并用getter自动计算总价等衍生状态，异步操作则在action中封装接口调用与回滚。
在购物车场景中，商品数量的加减不是简单地 ++ 或 --，而是要结合状态一致性、边界控制、数据持久化和视图响应性来设计。Vuex（或 Vue 3 推荐的 Pinia）通过集中管理 state + 明确的 mutation/action 规则，让这类操作既安全又可预测。
数量加减必须走 Mutation，且带校验
所有修改 cartList 中商品数量的操作，都应封装在 mutation 中，禁止直接在组件里修改 state。关键点：
- 每次增减前检查当前数量是否已达上限或下限（如最小为 1，最大不超过库存）
- 使用 find 定位目标商品，避免索引错位导致误改
- 数量更新后立即触发响应式更新（Vue 3 中直接赋值即可，无需 Vue.set）
加减逻辑要区分“存在”与“新增”
用户点击“+”时，实际分两种情况：
- 该商品已在购物车 → 只更新 quantity 字段
- 该商品不在购物车 → 先 push 新对象，再设 quantity = 1
典型 mutation 写法示例：
increment(state, id) {
const item = state.cartList.find(i => i.id === id);
if (item && item.quantity i.id === id);
if (item && item.quantity > 1) {
item.quantity--;
}
}
配套 Getter 实时反馈变化
数量变动后，总价、总件数、选中项统计等不能靠手动刷新，而应由 getter 自动计算：
- cartTotalCount：对 cartList 所有 quantity 求和
- cartSelectedTotalPrice：先 filter 出 checked: true 的商品，再 price × quantity 累加并 toFixed(2)
- 这些 getter 会随 state 变化自动重算，组件中直接用 computed 绑定即可
异步场景下用 Action 封装接口调用
如果数量变更需同步到服务端（比如库存扣减），应在 action 中处理：
- 先 commit mutation 更新本地数量
- 再调用 API，成功则继续，失败则 rollback（dispatch 对应的 revert mutation）
- 避免 UI 已变但接口失败导致状态不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
