Pinia Actions 是处理购物车数量云端同步最自然集中的位置:登录时调用接口并刷新全量数据确保一致,未登录时纯本地操作;衍生值通过 getters 实时计算;异常用 try/catch 显式处理。

Pinia Actions 是处理购物车商品数量云端同步最自然、最集中的位置。它把“判断登录状态→调用接口→更新本地数据”这一整条链路封装在一个函数里,避免逻辑散落在多个组件中。
登录状态下:先发请求,再刷新本地列表
用户已登录时,商品数量变更必须以服务端为准。Actions 中应明确区分“添加”和“增减数量”两类操作,并统一走接口同步:
- 调用 insertCartAPI(添加)或 updateCartAPI(修改数量)等后端接口
- 接口成功后,主动触发 updateNewList() 方法拉取最新购物车全量数据
- 用响应结果直接覆盖
cartList.value,确保本地状态与服务器完全一致
未登录时:纯本地操作,不发请求
游客状态不能写服务端,所有数量变化只保留在内存中:
- 查找已有商品:
cartList.value.find(item => item.skuId === skuId) - 存在则
item.count++或item.count--(注意防负数) - 不存在则
cartList.value.push({ skuId, count: 1, ... })
数量变更后,自动更新衍生值
购物车总数量、总价这些字段不应手动维护,而应通过 getters 实时计算:
totalItems: (state) => state.cartItems.reduce((sum, i) => sum + i.count, 0)totalPrice: (state) => state.cartItems.reduce((sum, i) => sum + i.price * i.count, 0)- 只要 cartItems 变了,这些值立刻响应更新,导航栏、结算页都能实时显示
异常情况要显式处理
网络失败或接口报错时,不能让 UI “卡住”或状态错乱:
- 在 action 内用
try/catch包裹异步请求 - 捕获错误后可抛出(供组件
await addCart(...).catch(...)处理),或存入error状态供 UI 提示 - 避免“请求失败但本地数量已加”,应只在
finally或成功回调里更新数据


















