Vue 3 + Pinia 实现购物车时，若直接修改数组内对象属性（如 item.quantity++）或使用 push/splice 原地操作，会导致响应式失效；正确做法是始终用新数组替换 state.cart，触发 Vue 的响应式更新。
vue 3 + pinia 实现购物车时，若直接修改数组内对象属性（如 `item.quantity++`）或使用 `push/splice` 原地操作，会导致响应式失效；正确做法是始终用新数组替换 `state.cart`，触发 vue 的响应式更新。
在 Vue 3 的响应式系统中，直接修改已存在对象的属性（如 item.quantity++）或对响应式数组执行原地变更（如 push、splice）并不会自动触发视图更新——尤其当该对象本身不是通过 reactive() 或 ref() 深度代理创建时（例如从 JSON 导入的普通对象）。你当前的 addToCart 和 removeFromCart 方法正是陷入了这一常见陷阱。
? 问题根源分析
- 在原始代码中，
addToCart找到已有商品后执行item.quantity++：这仅修改了普通 JS 对象属性，Pinia 的响应式系统无法追踪该变更； -
this.cart.push(item)属于原地数组操作，虽部分场景能触发更新，但 对嵌套对象属性变更无感知，且不符合 Pinia 推荐的不可变更新模式； -
removeFromCart中使用findIndex(x => x === id)逻辑错误（应比对x.id），且splice是原地修改，同样绕过响应式追踪。
✅ 正确实现：基于不可变更新 + 显式赋值
Pinia 官方推荐通过 重新赋值整个 state 字段（如 this.cart = newArray）来确保响应式生效。以下是修复后的 Pinia store 代码：
