Pinia 管理无限滚动分页应将偏移量状态抽离为独立 store，按唯一 key（如 'product-list'）隔离多列表状态，含 offset、limit、loading、hasMore 等字段，提供 reset() 和 loadNext() 方法，并支持 Map 多实例管理与 localStorage 持久化。
Pinia 结合无限滚动列表管理分页加载偏移量，关键在于把“当前已加载条数”“是否正在加载”“是否还有更多”等状态集中维护，并与滚动行为解耦。不建议在组件内用 ref 管理这些，否则多个相同列表（如商品 tab、订单 tab）会互相干扰，也难复用或调试。
偏移量状态应单独建 store 模块
例如创建 `stores/scrollPagination.ts`，专用于管理带分页的滚动列表状态：
- 每个实例用唯一 key 标识（如
'product-list'或'order-history'），避免不同列表状态混用 - state 包含：
offset（当前起始索引）、limit（每页条数）、loading、hasMore、error - 提供
reset()方法用于下拉刷新，loadNext()用于触底加载，内部自动更新 offset 和 loading 状态
组件中按需绑定对应 key 的状态
在无限滚动组件里，传入一个业务标识符（比如 listKey = 'user-activity'），然后：
- 调用
useScrollPaginationStore(listKey)获取专属状态实例 - 用
storeToRefs解构offset、loading、hasMore，保持响应性 - 滚动监听逻辑只负责触发
store.loadNext()，不直接操作数字
配合 API 请求做状态联动
在 loadNext() action 中，建议这样组织逻辑：
- 先设
loading = true，防止重复触发 - 调用接口时传入
offset和limit，后端返回实际数据 +total或next_cursor - 成功后：
offset += limit，并根据返回判断hasMore = response.data.length === limit（或更严谨地比对 total） - 失败时保留 offset 不变，仅设
error，允许用户重试
进阶：支持多列表共存与复位控制
如果页面有多个无限滚动区域（如左右双栏、Tab 切换），可扩展 store 支持：
- 用
Map<string paginationstate></string>存储多个 key 对应的状态，getByKey(key)动态获取 - 暴露
clear(key)或resetAll()，方便 Tab 切换时清空旧列表状态 - 若需持久化偏移量（如用户离开再返回），可在
$subscribe中写入 localStorage，key 带业务前缀（`pagination:${listKey}`）
