第 27 课：任务页分页大小记忆与用户偏好

第 27 课任务页分页大小记忆与用户偏好这一课我们继续沿着任务管理主线往下走补上另一个非常真实的后台系统能力让用户自己决定“每页显示多少条数据”并把这份偏好记住。很多初学者会觉得分页不是已经做完了吗其实还没有。因为真实项目里分页通常不只包含当前第几页还常常包含每页显示多少条而且这两个状态虽然都和分页有关但它们不一定应该用同一种存储策略。这一课一句话在做什么这一课我们完成了 5 件事给任务页分页栏加了“每页显示多少条”的切换能力让任务页分页大小只能在一组合法选项中切换把分页大小保存到localStorage刷新后自动恢复这份分页偏好补上单元测试、E2E、类型和文档这节课最重要的设计问题这一课最值得你认真想清楚的问题是页码和分页大小到底该不该都写进 URL答案是页码更适合进 URL分页大小更适合做本地偏好为什么页码为什么适合写进 URL因为页码更像“当前场景状态”。例如你现在正在看第 3 页这往往是一个可以刷新恢复可以分享给别人可以前进后退回溯的状态。所以它很适合写进 URL。分页大小为什么更适合写进本地存储因为分页大小更像“个人使用习惯”。例如你喜欢每页 2 条每页 4 条每页 6 条这通常不是业务筛选条件而是你自己的阅读偏好所以它更适合记在本机刷新保留不一定需要分享给别人这就是为什么这一课我们特意把分页大小做成localStorage持久化而不是URL query 同步这节课新增了什么类型文件src/types/task.ts这一课新增了两个类型TaskPageSizeOptionTaskPageSizeOptionItem这里的意义非常重要。我们没有把分页大小当成一个“随便来个数字就行”的状态而是明确限制为246这样做的好处是页面状态更稳定测试边界更清晰本地存储恢复时更容易做合法性清理这节课在useTasksPage里做了什么文件src/composables/useTasksPage.ts这一课最核心的改动仍然在任务页 composable 里。因为“分页大小偏好”属于页面级状态它不是单个分页组件自己的局部临时状态新增了分页大小相关常量例如DEFAULT_TASK_PAGE_SIZETASK_TABLE_PAGE_SIZE_STORAGE_KEYTASK_PAGE_SIZE_OPTIONS这些常量的作用是统一默认值统一本地存储 key统一合法选项这样后面组件层页面层测试层都能复用同一份定义。新增了本地存储读写函数例如readPersistedTaskPageSize()persistTaskPageSize()它们负责从本地存储里读取旧偏好如果值非法就回退默认值把最新合法分页大小写回本地存储这和上一课的“列配置持久化”是同一个工程思路。也就是说你现在已经开始在项目里重复练同一种“用户偏好状态”的设计模式了。新增了标准化函数例如isTaskPageSizeOptionnormalizeTaskPageSize这类函数的意义是不要相信本地存储永远是干净的。本地存储里的值可能来自老版本数据手动修改异常写入所以你每次读出来都应该先做合法性清理。这就是为什么我们这次依然坚持先读再校验再使用这节课对分页逻辑带来了什么变化原来任务页是固定每页 4 条现在变成了pageSize是一个响应式ref这会带来 3 个直接影响。1. 总页数会跟着变化例如 6 条任务时每页 4 条 共 2 页每页 2 条 共 3 页2. 当前页切片结果会跟着变化也就是说paginatedTasks不再只依赖currentPage还依赖pageSize3. 页码合法性也会受到影响如果你原来在第 3 页然后把分页大小改大可能总页数会立刻变少。所以这一课里我们也把filteredTasks监听升级成了同时关注filteredTaskspageSize这样一来只要分页大小变化导致总页数不合法页码就会自动钳制回合法范围。为什么这节课切换分页大小后要回到第一页这一课里我们特意在handlePageSizeChange里做了一个策略切换分页大小后主动回到第一页为什么这样做因为分页大小变化后旧页码的语义很容易变得不稳定。例如你原来在第 2 页每页 4 条现在改成每页 2 条这时“第 2 页”已经不再表示原来那一段数据了。为了让体验更清楚、更稳定我们直接回到第一页。这是一个很常见、也很合理的后台系统设计。TaskPaginationBar.vue这次发生了什么变化文件src/components/tasks/TaskPaginationBar.vue这一课里分页栏不再只有分页摘要页码切换器现在还新增了分页大小下拉框结构也更完整了左侧展示摘要右侧展示分页大小控制结果超过一页时再展示页码控件新增了哪些 propspageSizeOptions这说明分页组件不自己定义“有哪些大小可选”而是由页面层传入。这样组件仍然保持展示层而不是状态定义中心新增了哪些事件page-size-change这表示分页栏只负责把用户意图抛出去不自己决定如何持久化。这仍然符合我们一直在练的分层原则组件负责 UI 与事件composable 负责状态与行为为什么这节课还要补 E2E文件e2e/app.spec.tse2e/pages/TasksPage.ts因为“分页大小记忆”这种功能光做单元测试还不够。它还涉及Element Plus 下拉框真实交互分页器页码是否真的变化刷新后是否真的恢复这些都属于真实页面行为所以很适合用 E2E 验证。这次新增的任务页 E2E 大致验证了把分页大小切到2看摘要是否更新看第3页是否出现刷新页面再次确认摘要和第3页仍然存在为什么这节课也要补单元测试文件src/composables/__tests__/useTasksPage.spec.ts这次新增的单元测试主要覆盖了从localStorage恢复分页大小非法分页大小自动回退默认值切换分页大小后重置页码切换分页大小后重新计算分页结果切换分页大小后写回本地存储你会发现单元测试更适合验证逻辑边界E2E 更适合验证真实交互闭环这两层各有价值不是互相替代关系。这一课最值得你真正学会什么如果你只记住“多了一个每页显示条数下拉框”那还不够。你更应该学会下面这 6 点页码和分页大小虽然都属于分页但不一定适合用同一种存储策略业务场景状态更适合进 URL个人使用偏好更适合进本地存储本地持久化状态读取后一定要先做标准化分页大小一旦变成响应式状态就会影响总页数、切片结果和页码合法性组件层负责交互入口组合式函数负责偏好状态与持久化这种用户偏好能力也应该同时补单元测试和 E2E这节课改了哪些文件src/types/task.tssrc/composables/useTasksPage.tssrc/composables/__tests__/useTasksPage.spec.tssrc/components/tasks/TaskPaginationBar.vuesrc/views/TasksView.vuee2e/pages/TasksPage.tse2e/app.spec.tsdocs/27-task-page-size-persistence.mddocs/README.md这一课的验证结果这一课相关改动已经通过npm run test:unit -- --runnpm run test:e2e -- --projectchromiumnpm run type-checknpm run lint下一步最适合继续什么沿着“任务表格更像真实后台系统”的主线后面最自然的方向有三个记住排序偏好记住筛选偏好做列顺序拖拽或列宽记忆如果继续按当前节奏推进我更推荐下一课做排序偏好与默认工作视图因为它会让你进一步比较哪些状态适合进 URL哪些状态适合做本地偏好