推荐用 Set 管理选中行 ID（如 selectedIds: new Set()），配合 getter 按需查原始数据，兼顾响应式、去重、跨页记忆与持久化；避免直接存整行对象导致状态漂移。

直接用 state 存一个数组即可，推荐用 Set 或 Map 结构提升去重和查询效率，避免重复选中、误删或状态漂移。

用 reactive 数组管理（适合简单场景）

在 Store 的 state 中定义一个响应式数组，如：

• selectedRows: [] —— 存储选中行的完整对象（注意：需确保每行有唯一标识，如 id）
• 配合 vxe-table 的 @checkbox-change 和 @checkbox-all 事件同步更新
• 删除/刷新后需手动清空该数组，否则残留旧数据

用 Set 管理 ID 集合（推荐，更健壮）

只存选中行的主键（如 id），不存整行数据，解耦数据源与选中状态：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• selectedIds: new Set() —— 在 state 中初始化为 Set 实例（Pinia 支持原生 Set 响应式）
• 勾选时：this.selectedIds.add(row.id)
• 取消时：this.selectedIds.delete(row.id)
• 全选/反选可批量 add/delete，逻辑清晰且无副作用

结合 getters 获取当前选中行数据

不把整行数据冗余存在 state 里，而是按需从原始数据源中查出：

• 假设表格数据在 tableStore.data，则 getter 可写为：
• selectedRows: (state) => Array.from(state.selectedIds).map(id => tableStore.data.find(r => r.id === id)).filter(Boolean)
• 这样既保持 state 轻量，又保证视图拿到的是最新、真实的数据快照

支持跨组件复用与持久化（可选增强）

若需页面刷新后保留选中状态，可搭配 pinia-plugin-persistedstate：

• 仅对 selectedIds 字段开启本地存储，避免缓存过期数据
• 注意：ID 列表本身无业务含义，但能安全重建选中关系
• 服务端分页时，建议额外存 selectedPageKeys: Map<page set>></page> 来支持多页记忆