Pinia 通过独立 store 管理表格列显隐、列宽、顺序及排序等 UI 偏好状态，仅存储用户可变配置，支持响应式绑定、持久化及多表格隔离。
Pinia 处理表格列显隐与排序配置的全局状态，核心是把“列配置”和“排序信息”作为可响应、可持久、可复用的状态模块统一管理，而不是散落在组件内部或通过 props 传递。
把列配置和排序信息纳入 Store 状态
列显隐（如某列是否 visible）、列宽、列顺序、排序字段及方向等，都属于用户交互产生的个性化配置。这些不是业务数据，而是 UI 偏好状态，适合放在 Pinia Store 中独立维护：
- 在 state 中定义 columnsConfig 对象，每个 key 是列 field，值包含
visible: boolean、width?: number、orderIndex?: number - 单独声明 sortInfo 字段，结构如
{ field: 'name', order: 'asc' }，保持与 vxe-table 的sort-config兼容 - 避免把原始 column 定义（含 title、formatter 等）全塞进 store，只存“用户可变部分”，提升可维护性
同步更新与响应式绑定
vxe-table 支持通过 :columns 和 :sort-config 接收响应式配置，Pinia 可直接提供这些值：
- 模板中写
<vxe-table :columns="tableStore.columnsConfig" :sort-config="tableStore.sortInfo"> - 列显隐变更时，调用 action 如
toggleColumn('status')，内部用this.columnsConfig.status.visible = !this.columnsConfig.status.visible直接更新 - 排序变化时监听
@sort-change，把事件参数赋给tableStore.sortInfo，并触发 reload 或本地排序逻辑
支持刷新后恢复配置（可选持久化）
用户调整过的列显隐、排序等偏好，通常希望页面刷新后依然保留：
- 安装
pinia-plugin-persistedstate插件，在 store 配置中指定需要持久化的字段，例如只存columnsConfig和sortInfo - 无需手动读写 localStorage，插件自动序列化/反序列化，且支持自定义存储位置（如 sessionStorage 或 indexedDB）
- 注意排除敏感字段（如 token），也避免持久化过大对象（如整张表 data）
多表格场景下的模块隔离
一个页面可能有多个表格（如用户列表 + 日志列表），它们的列配置应互不干扰：
- 为每个表格创建独立 store，如
useUserTableStore()和useLogTableStore() - 或使用带命名空间的单个 store，通过
storeId动态生成，例如defineStore(`table-${id}`, {...}) - 避免共用同一份
columnsConfig，否则切换页面时配置会互相覆盖
