本技能基于 @tanstack/table-core 与入门内容,聚焦 Vue 适配器下的表格状态管理。
用途:TanStack Table 本质是状态协调器。除非其他系统需要读取、持久化或驱动状态,否则应保持状态内部化。未配置 initialState、atoms、state 或 on[State]Change 时,表格拥有所有已注册切片。
主要能力:table.baseAtoms 是由解析后初始状态创建的内部可写 atom;table.atoms 是各切片当前拥有者的只读派生 atom;table.store 将它们合并为一个只读扁平 store。Vue 适配器用 refs/computed 支撑 atom,并跟踪响应式表格选项。在模板、computed、watch 或 table.Subscribe 中读取 atom 才具响应性,在跟踪之外缓存的读取只是快照。状态按功能划分,缺少 pagination atom 或选项意味着未注册 rowPaginationFeature。
使用方式:用 useTable({ features, columns, data }) 创建表格,features 由 tableFeatures({ rowPaginationFeature }) 生成。受控切片可传入 state 与 on[State]Change,并保留响应式包装(传 computed 而非其 .value),回调需处理值或更新函数两种形式。table.Subscribe 在 Vue JSX 中 children 是显式 prop,不是插槽子节点。每个切片只能有一个拥有者:优先内部状态与功能方法;initialState 用于起始/重置值;跨系统拥有用稳定的 @tanstack/vue-store atom;简单受控用 ref/computed 加回调。外部 atom 优先于外部 state。
限制与常见错误:在跟踪外读取 atom 会失去响应性;一次性传 state.value 会破坏后续同步;把更新函数直接赋值为值会出错;Subscribe 用插槽写法无效。功能重置使用 table.initialState,传 true 请求功能默认值;核心 table.reset() 只重置内部 base atom。全局 v8 onStateChange 已移除,如需观察全部状态变化应观察 table.store。具体 API 可查看 node_modules/@tanstack/vue-table/dist/useTable.d.ts 与 reactivity.d.ts。