Pinia 的 state 管理多选框选中项,核心是用响应式数组或对象结构准确记录“哪些被选中”,支持增删、全选/取消、持久化同步;数组适用于 ID 明确的简单场景,对象映射适合需独立控制或存元信息的场景,getter 用于派生状态(如半选、统计),初始化应与异步数据对齐并统一由 store 管理。

Pinia 的 state 处理多选框选中项集合,核心是用响应式数组或对象结构准确记录“哪些被选中”,并支持增删、全选/取消、持久化同步等常见操作。它不关心 UI 渲染逻辑,只专注把选中状态可靠地存下来、可读、可改、可响应。
用 reactive 数组直接管理选中 ID 列表
适用于选项结构简单、ID 明确的场景(如权限列表、商品勾选、表格行选择):
- 在 store 的
state中定义一个数组,如selectedIds: [] - 提供 actions 方法统一更新:
toggleId(id)切换单个、selectAll(ids)批量设置、clear()清空 - 组件中调用
store.toggleId(item.id)即可,无需手动维护数组变化逻辑,响应式自动触发视图更新
用对象映射记录每个选项的布尔状态
适合需要独立控制每个选项、或需同时保存额外元信息(如禁用态、加载中)的场景:
- state 定义为对象,键为选项唯一标识,值为布尔值:
selectionMap: { 'user-1': true, 'user-2': false } - getters 可快速派生常用值:
allSelected: (state) => Object.values(state.selectionMap).every(Boolean)、selectedCount: (state) => Object.values(state.selectionMap).filter(Boolean).length - actions 中通过
this.selectionMap[id] = !this.selectionMap[id]安全切换,避免数组索引错位问题
结合 getter 实现“半选”状态与批量操作聚合
在树形结构或多层级多选(如部门+员工)中,常需判断父节点是否“全选/半选/未选”:
- state 存储原始选中项(如扁平 ID 数组),再通过 getters 计算层级关系:
isDepartmentPartiallySelected(deptId) - 利用 computed 逻辑复用:根据当前已选 ID 列表 + 后端返回的完整树结构,动态推导各节点状态
- 避免在 state 中冗余存“半选”标志,保持 state 纯净,把派生逻辑交给 getters
注意与表单联动时的初始化和同步时机
多选框常来自异步加载的列表,state 初始化和数据就绪需对齐:
- 不要在 store 创建时硬编码默认选中项;应在获取列表数据后,由业务逻辑调用
setInitialSelection()action 初始化 - 若页面刷新需保留选中状态,可在 action 中更新 state 后,同步写入 localStorage;或使用 pinia-plugin-persistedstate 插件自动处理
- 避免子组件各自维护局部 selected 状态再汇总——应统一由 store 管理,组件只读取 + 触发 action


















