Cum să implementați paginarea într-o aplicație Vue

Paginarea vă permite să împărțiți seturi mari de date în bucăți mai mici și mai ușor de gestionat. Paginarea facilitează navigarea în seturi mari de date și găsirea informațiilor pe care le caută.

Aflați despre tehnică și cum să o implementați în Vue, cu acest exemplu de proiect.

Noțiuni introductive cu Vue-Awesome-Paginate

Vue-awesome-paginate este o bibliotecă de paginare Vue puternică și ușoară care simplifică procesul de creare a afișajelor de date paginate. Oferă caracteristici complete, inclusiv componente personalizabile, API-uri ușor de utilizat și suport pentru diferite scenarii de paginare.

Pentru a începe să utilizați vue-awesome-paginate, instalați pachetul rulând această comandă de terminal în directorul de proiect:

npm install vue-awesome-paginate

Apoi, pentru a configura pachetul să funcționeze în aplicația ta Vue, copiați codul de mai jos în src/main.js fişier:

import { createApp } from"vue";
import App 





instagram viewer

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

Acest cod importă și înregistrează pachetul cu .utilizare() metoda, astfel încât să o puteți utiliza oriunde în aplicația dvs. Pachetul de paginare vine cu un fișier CSS, pe care blocul de cod îl importă și el.

Construirea aplicației Test Vue

Pentru a ilustra modul în care funcționează pachetul vue-awesome-paginate, veți construi o aplicație Vue care afișează un exemplu de set de date. Vei fi preluarea datelor dintr-un API cu Axios pentru această aplicație.

Copiați blocul de cod de mai jos în dvs App.vue fişier:

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

Acest bloc de cod folosește API-ul Vue Composition pentru a construi o componentă. Componenta folosește Axios pentru a prelua comentarii din API-ul JSONPlaceholder înainte ca Vue să o monteze (onBeforeMount cârlig). Apoi stochează comentariile în comentarii matrice, folosind șablonul pentru a le afișa sau un mesaj de încărcare până când comentariile sunt disponibile.

Integrarea Vue-Awesome-Paginate în aplicația dvs. Vue

Acum aveți o aplicație Vue simplă care preia date dintr-un API, o puteți modifica pentru a integra pachetul vue-awesome-paginate. Veți folosi această funcție de paginare pentru a împărți comentariile în diferite pagini.

Inlocuieste scenariu secțiunea dvs App.vue fisier cu acest cod:

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

Acest bloc de cod adaugă încă două referințe reactive: per pagină și pagina curenta. Aceste referințe stochează numărul de articole de afișat pe pagină și, respectiv, numărul paginii curente.

Codul creează, de asemenea, un ref calculat numit Comentarii afișate. Aceasta calculează intervalul de comentarii pe baza pagina curenta și per pagină valorile. Returnează o felie din comentarii matrice din acel interval, care va grupa comentariile pe pagini diferite.

Acum, înlocuiți șablon secțiunea fișierului App.vue cu următoarele:

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

The v-pentru atribut pentru randarea listelor în această secțiune de șablon indică Comentarii afișate matrice. Șablonul adaugă vue-awesome-paginate componentă, căreia fragmentul de mai sus îi transmite recuzită. Puteți afla mai multe despre acestea și elementele de recuzită suplimentare în documentul oficial al pachetului documentație pe GitHub.

După ce vă stilați aplicația, ar trebui să obțineți o pagină care arată astfel:

Faceți clic pe fiecare buton numerotat și veți vedea un set diferit de comentarii.

Utilizați paginarea sau derularea infinită pentru o mai bună navigare a datelor

Acum aveți o aplicație Vue foarte simplă, care demonstrează cum să paginați eficient datele. De asemenea, puteți utiliza derularea infinită pentru a gestiona seturi lungi de date în aplicația dvs. Asigurați-vă că luați în considerare nevoile aplicației înainte de a alege, deoarece paginarea și derularea infinită au argumente pro și contra.