Composable для пагинации: ```javascript // composables/usePagination.js import { ref, computed, watch } from 'vue' export function usePagination(fetchFn, options = {}) { const { pageSize = 20, initialPage = 1 } = options const currentPage = ref(initialPage) const totalItems = ref(0) const items = ref([]) const isLoading = ref(false) const error = ref(null) const totalPages = computed(() => Math.ceil(totalItems.value / pageSize) ) const hasNextPage = computed(() => currentPage.value < totalPages.value) const hasPrevPage = computed(() => currentPage.value > 1) // Диапазон отображаемых страниц (1 ... 4 5 [6] 7 8 ... 20) const pageRange = computed(() => { const total = totalPages.value const current = currentPage.value const delta = 2 const pages = [] // Всегда показываем первую pages.push(1) const rangeStart = Math.max(2, current - delta) const rangeEnd = Math.min(total - 1, current + delta) if (rangeStart > 2) pages.push('...') for (let i = rangeStart; i <= rangeEnd; i++) { pages.push(i) } if (rangeEnd < total - 1) pages.push('...') // Всегда показываем последнюю if (total > 1) pages.push(total) return pages }) async function fetchData() { isLoading.value = true error.value = null try { const result = await fetchFn({ page: currentPage.value, pageSize }) items.value = result.data totalItems.value = result.total } catch (err) { error.value = err } finally { isLoading.value = false } } function goToPage(page) { if (page < 1 || page > totalPages.value) return if (page === currentPage.value) return currentPage.value = page } function nextPage() { if (hasNextPage.value) currentPage.value++ } function prevPage() { if (hasPrevPage.value) currentPage.value-- } watch(currentPage, fetchData, { immediate: true }) return { items, currentPage, totalPages, totalItems, pageRange, isLoading, error, hasNextPage, hasPrevPage, goToPage, nextPage, prevPage } } ``` Компонент пагинации: ```vue ``` Использование с синхронизацией URL: ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Таблица данных** -- классическая пагинация с выбором pageSize (10, 25, 50) 🔹 **Каталог товаров** -- пагинация + фильтры + URL-синхронизация 🔹 **Cursor-based** -- API вроде GraphQL Relay, Twitter feed (next cursor вместо page number) --- ## Частые ошибки ```javascript // ❌ Пагинация не в URL -- нельзя скопировать ссылку на 5ю страницу goToPage(5) // Состояние только в ref // ✅ Синхронизируй с query params watch(currentPage, (page) => { router.replace({ query: { page } }) }) // ❌ Сброс на страницу 1 при смене фильтров watch(filters, () => fetchData()) // Осталась на 5й странице с новыми фильтрами // ✅ Сбрасывай на первую страницу watch(filters, () => { currentPage.value = 1 // fetchData вызовется через watch на currentPage }) ``` --- ## Резюме | Тип | Когда | |---|---| | Offset/page | Классические таблицы, каталоги | | Cursor-based | Real-time данные, большие объёмы | | Infinite scroll | Ленты, соц. сети | ---

Как реализовать пагинацию в Vue-приложении?