我正在重构一个【如：电商购物车】的前端模块，目前使用的是【如：Vue 2 + Options API + 递归组件】，代码耦合严重

# 任务 设计购物车模块重构的状态机与数据结构。 # 背景 - 受众：前端开发人员 - 场景：Vue 2 重构至 React 18 - 目的：解耦代码并提升结算体验 # 要求 ## 内容要求 - 先回答：如何将联动计算剥离至Hook层？虚拟滚动如何设计？ - 后输出：状态机设计思路、核心数据结构定义。 ## 格式要求 - Markdown格式，包含代码片段。 ## 约束条件 - 必须：使用 React 18 + Immer 架构。 - 禁止：在回答架构问题前输出 UI 代码。