Como implementar paginação em um aplicativo Vue

A paginação permite dividir grandes conjuntos de dados em partes menores e mais gerenciáveis. A paginação torna mais fácil para os usuários navegar em grandes conjuntos de dados e encontrar as informações que procuram.

Aprenda sobre a técnica e como implementá-la no Vue com este projeto de exemplo.

Primeiros passos com Vue-Awesome-Paginate

Vue-incrível-paginate é uma biblioteca de paginação Vue poderosa e leve que simplifica o processo de criação de exibições de dados paginados. Ele fornece recursos abrangentes, incluindo componentes personalizáveis, APIs fáceis de usar e suporte para vários cenários de paginação.

Para começar a usar vue-awesome-paginate, instale o pacote executando este comando de terminal no diretório do seu projeto:

npm install vue-awesome-paginate

Então, para configurar o pacote para funcionar em sua aplicação Vue, copie o código abaixo para o src/main.js arquivo:

import { createApp } from"vue";
import

instagram viewer
 App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");

Este código importa e registra o pacote com o .usar() método, para que você possa usá-lo em qualquer lugar do seu aplicativo. O pacote de paginação vem com um arquivo CSS, que o bloco de código também importa.

Construindo o aplicativo Test Vue

Para ilustrar como o pacote vue-awesome-paginate funciona, você construirá um aplicativo Vue que exibe um conjunto de dados de amostra. Você será buscando dados de uma API com Axios para este aplicativo.

Copie o bloco de código abaixo em seu Aplicativo.vue arquivo:

<scriptsetup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`,
 );
 return response.data.map((comment) => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Este bloco de código usa a API de composição Vue para construir um componente. O componente usa Axios para buscar comentários da API JSONPlaceholder antes que o Vue o monte (onBeforeMount gancho). Em seguida, ele armazena os comentários no comentários array, usando o modelo para exibi-los ou uma mensagem de carregamento até que os comentários estejam disponíveis.

Integrando Vue-Awesome-Paginate em seu aplicativo Vue

Agora que você tem um aplicativo Vue simples que busca dados de uma API, você pode modificá-lo para integrar o pacote vue-awesome-paginate. Você usará este recurso de paginação para dividir os comentários em páginas diferentes.

Substitua o roteiro seção do seu Aplicativo.vue arquivo com este código:

<scriptsetup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);
const onClickHandler = (page) => {
 console.log(page);
};
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`
 );
 return response.data.map(comment => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
const displayedComments = computed(() => {
 const startIndex = (currentPage.value * perPage.value) - perPage.value;
 const endIndex = startIndex + perPage.value;
 return comments.value.slice(startIndex, endIndex);
});
script>

Este bloco de código adiciona mais duas referências reativas: por página e pagina atual. Estas referências armazenam o número de itens a serem exibidos por página e o número da página atual, respectivamente.

O código também cria uma referência computada chamada exibidoComentários. Isso calcula o intervalo de comentários com base no pagina atual e por página valores. Ele retorna uma fatia do comentários array dentro desse intervalo, que agrupará os comentários em páginas diferentes.

Agora, substitua o modelo seção do seu arquivo App.vue com o seguinte:

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in displayedComments"class="comment">
<p>{{ comment }}p>
div>
<vue-awesome-paginate
 :total-items="comments.length"
 :items-per-page="perPage"
 :max-pages-shown="5"
 v-model="currentPage"
 :onclick="onClickHandler"
 />
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

O v-para atributo para listas de renderização nesta seção de modelo aponta para o exibidoComentários variedade. O modelo adiciona o vue-awesome-paginate componente, para o qual o trecho acima passa adereços. Você pode aprender mais sobre esses e outros adereços no site oficial do pacote. documentação no GitHub.

Depois de estilizar seu aplicativo, você deverá obter uma página semelhante a esta:

Clique em cada botão numerado e você verá um conjunto diferente de comentários.

Use paginação ou rolagem infinita para melhor navegação nos dados

Agora você tem um aplicativo Vue muito básico que demonstra como paginar dados com eficiência. Você também pode usar a rolagem infinita para lidar com conjuntos de dados longos em seu aplicativo. Certifique-se de considerar as necessidades do seu aplicativo antes de escolher, pois a paginação e a rolagem infinita têm prós e contras.