想起過去追求程世社季子時，在網拍上不停地翻頁，尋找一個完美的禮物，想要藉此向她告白。我記得每一次換頁，內心的焦急與期待都不斷增加，彷彿每翻一頁就更接近那個最適合她的禮物。

前情提要

昨天做了電商的商品列表，PM 馬上問說能不能做分頁。好吧…不愧是 PM 需求都是開發完才來

那今天來介紹分頁的工具 useOffsetPagination

useOffsetPagination

useOffsetPagination 是一個用於管理偏移量分頁的 Vue 組合式函數。它提供了一套完整的分頁控制的邏輯，適用於傳統的分頁列表場景（還有無限滾動的方式，過兩天再介紹）。

功能

• 管理分頁狀態（當前頁碼、每頁項目數等）
• 計算分頁相關的值（總頁數、是否為首頁/末頁等）
• 提供分頁導航方法（上一頁、下一頁）
• 支持動態調整每頁項目數
• 可選的回調函數用於頁碼或頁面大小變更時的額外操作

類型定義

interface UseOffsetPaginationOptions {
  total?: MaybeRefOrGetter<number>
  pageSize?: MaybeRefOrGetter<number>
  page?: MaybeRef<number>
  onPageChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
  onPageSizeChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
  onPageCountChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
}

interface UseOffsetPaginationReturn {
  currentPage: Ref<number>
  currentPageSize: Ref<number>
  pageCount: ComputedRef<number>
  isFirstPage: ComputedRef<boolean>
  isLastPage: ComputedRef<boolean>
  prev: () => void
  next: () => void
}

參數

返回值

使用示例

import { ref } from 'vue'
import { useOffsetPagination } from '@vueuse/core'

const total = ref(100)

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total,
  page: 1,
  pageSize: 10,
  onPageChange: ({ currentPage, currentPageSize }) => {
    // 在這裡處理頁面變更，例如獲取新數據
    fetchData(currentPage, currentPageSize)
  },
})

function fetchData(page, pageSize) {
  // 實現獲取數據的邏輯
}

注意事項

1. 當提供 total 參數時，useOffsetPagination 將計算總頁數並提供 isLastPage 信息。
2. 如果不提供 total 參數，函數將返回一個稍微不同的對象（不包含 isLastPage），這可以用於實現類似"加載更多"的功能，但不等同於完整的無限滾動實現。
3. 對於需要實現真正無限滾動的場景，建議使用其他專門的函數（如 useInfiniteScroll）或添加額外的邏輯。
4. useOffsetPagination 主要處理分頁狀態和計算，實際的數據獲取邏輯需要在回調函數中實現。

使用場景

• 實現傳統的分頁列表界面
• 管理分頁相關的狀態和計算
• 需要靈活控制頁碼和每頁項目數的場景
• 與後端 API 進行分頁數據獲取的集成

透過使用 useOffsetPagination，開發者可以輕鬆實現複雜的分頁邏輯，提高開發效率，並確保分頁功能的可靠性和一致性。

明天我們再來完整分析 useOffsetPagination ，如果有任何錯誤再麻煩連延讓我知道喔～