Come implementare l'impaginazione in un'applicazione Vue

L'impaginazione ti consente di dividere set di dati di grandi dimensioni in blocchi più piccoli e più gestibili. L'impaginazione rende più semplice per gli utenti navigare in set di dati di grandi dimensioni e trovare le informazioni che cercano.

Scopri la tecnica e come implementarla in Vue con questo progetto di esempio.

Iniziare con Vue-Awesome-Paginate

Vue-awesome-impaginato è una libreria di impaginazione Vue potente e leggera che semplifica il processo di creazione di visualizzazioni di dati impaginati. Fornisce funzionalità complete, inclusi componenti personalizzabili, API facili da usare e supporto per vari scenari di impaginazione.

Per iniziare a utilizzare vue-awesome-paginate, installa il pacchetto eseguendo questo comando da terminale nella directory del tuo progetto:

npm install vue-awesome-paginate

Quindi, per configurare il pacchetto in modo che funzioni nella tua applicazione Vue, copia il codice seguente nel file src/main.js file:

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

Questo codice importa e registra il pacchetto con il file .utilizzo() metodo, in modo da poterlo utilizzare ovunque nell'applicazione. Il pacchetto di impaginazione viene fornito con un file CSS, importato anche dal blocco di codice.

Creazione dell'applicazione Test Vue

Per illustrare come funziona il pacchetto vue-awesome-paginate, creerai un'app Vue che visualizza un set di dati di esempio. Sarai recuperare i dati da un'API con Axios per questa applicazione.

Copia il blocco di codice riportato di seguito nel tuo App.vue file:

<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>

Questo blocco di codice utilizza l'API Vue Composition per costruire un componente. Il componente utilizza Axios per recuperare i commenti dall'API JSONPlaceholder prima che Vue lo monti (onBeforeMount gancio). Quindi memorizza i commenti nel file Commenti array, utilizzando il modello per visualizzarli o un messaggio di caricamento finché non sono disponibili commenti.

Integrazione di Vue-Awesome-Paginate nella tua app Vue

Ora hai una semplice app Vue che recupera i dati da un'API, puoi modificarla per integrare il pacchetto vue-awesome-paginate. Utilizzerai questa funzione di impaginazione per dividere i commenti in pagine diverse.

Sostituisci il sceneggiatura sezione del tuo App.vue file con questo codice:

<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>

Questo blocco di codice aggiunge altri due riferimenti reattivi: per pagina E pagina corrente. Questi riferimenti memorizzano rispettivamente il numero di elementi da visualizzare per pagina e il numero di pagina corrente.

Il codice crea anche un riferimento calcolato denominato visualizzatiCommenti. Questo calcola l'intervallo di commenti in base a pagina corrente E per pagina valori. Restituisce una fetta del file Commenti array all'interno di tale intervallo, che raggrupperà i commenti in pagine diverse.

Ora, sostituisci il modello sezione del file App.vue con quanto segue:

<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>

IL v-per attributo per gli elenchi di rendering in questa sezione del modello punta a visualizzatiCommenti vettore. Il modello aggiunge il file vue-awesome-paginate componente, a cui lo snippet sopra passa gli oggetti di scena. Puoi saperne di più su questi e altri oggetti di scena nel documento ufficiale del pacchetto documentazione su GitHub.

Dopo aver modellato la tua applicazione, dovresti ottenere una pagina simile a questa:

Fai clic su ciascun pulsante numerato e vedrai una serie diversa di commenti.

Utilizza l'impaginazione o lo scorrimento infinito per una migliore navigazione dei dati

Ora disponi di un'app Vue molto semplice che dimostra come impaginare i dati in modo efficiente. Puoi anche utilizzare lo scorrimento infinito per gestire set di dati lunghi nella tua applicazione. Assicurati di considerare le esigenze della tua app prima di scegliere, poiché l'impaginazione e lo scorrimento infinito hanno pro e contro.