Pinia 实现跨组件状态联动的核心是将共享状态抽离至 store，如购物车数量通过 cartStore 的 state 和 action 统一管理，各组件调用 useCartStore() 响应式读写，支持异步校验、持久化及多环境隔离。
Pinia 实现跨组件状态联动，核心在于把共享状态抽离到 store 中，让多个组件通过同一份响应式数据源进行读写。购物车数量同步正是典型场景：商品列表页、顶部导航栏、侧边栏、结算页等都需实时显示和修改同一购物车总数。
定义统一的购物车 Store
创建一个 cartStore，用 ref 或 state 管理数量，推荐用 state 便于扩展（如后续加商品明细）：
- 在
src/stores/cart.ts中定义 store - 用
defineStore声明，state 返回对象含count: number - 配套提供
increment()、decrement()、setCount(n)等 action 封装逻辑 - 避免直接在组件中修改
store.count++，统一走 action 保证可追踪和可复用
在任意组件中响应式读写购物车数量
不需要 props 或事件总线，所有组件只需引入并使用 store：
- 用
const cart = useCartStore()获取实例（自动订阅响应式） - 模板中直接写
{{ cart.count }}，数据变化自动更新视图 - 点击“加入购物车”时调用
cart.increment()，其他组件立刻看到新数值 - 支持组合式 API 和 Options API，也兼容 Vue 2（通过 pinia-plugin-persistedstate 可持久化）
处理异步操作与副作用（如请求后更新）
真实购物车常需接口校验，比如库存不足时不能加购。这时 action 内可集成逻辑：
- 在
increment()中调用 API，成功后再更新state.count - 用
pending状态控制按钮 loading，避免重复提交 - 失败时抛错或触发全局提示，不改变本地 count，保持状态可信
- 如需监听 count 变化做埋点或日志，可用
watch监听cart.count
进阶：多 tab 或微前端下的隔离与复用
若应用含多个独立模块（如 PC 端和 H5 端共存），可通过 store id 区分：
- 定义
usePcCartStore()和useH5CartStore()两个独立 store - 共享逻辑抽成函数（如
createCartActions()），减少重复代码 - 主应用中按需挂载对应 store，避免跨域或命名冲突
- 调试时在 Vue Devtools 中可清晰看到各 store 实例及状态快照
