Hur man implementerar paginering i en Vue-applikation

Paginering låter dig dela upp stora datamängder i mindre, mer hanterbara bitar. Paginering gör det lättare för användare att navigera i stora datamängder och hitta den information de söker.

Lär dig mer om tekniken och hur du implementerar den i Vue med detta exempelprojekt.

Komma igång med Vue-Awesome-Paginate

Vue-awesome-pagete är ett kraftfullt och lätt Vue-pagineringsbibliotek som förenklar processen att skapa paginerade datavisningar. Den tillhandahåller omfattande funktioner, inklusive anpassningsbara komponenter, lättanvända API: er och stöd för olika sideringsscenarier.

För att börja använda vue-awesome-paginate, installera paketet genom att köra det här terminalkommandot i din projektkatalog:

npm install vue-awesome-paginate

Sedan, för att konfigurera paketet för att fungera i din Vue-applikation, kopiera koden nedan till src/main.js fil:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";





instagram viewer
createApp(App).use(VueAwesomePaginate).mount("#app");

Denna kod importerar och registrerar paketet med .använda sig av() metod, så att du kan använda den var som helst i din applikation. Pagineringspaketet kommer med en CSS-fil, som kodblocket också importerar.

Bygger Test Vue-applikationen

För att illustrera hur paketet vue-awesome-paginate fungerar, bygger du en Vue-app som visar ett exempel på dataset. Du kommer bli hämta data från ett API med Axios för den här appen.

Kopiera kodblocket nedan till din App.vue fil:

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

Detta kodblock använder Vue Composition API att bygga en komponent. Komponenten använder Axios för att hämta kommentarer från JSONPlaceholder API innan Vue monterar den (påBeforeMount krok). Den lagrar sedan kommentarerna i kommentarer array, använda mallen för att visa dem eller ett laddningsmeddelande tills kommentarer är tillgängliga.

Integrera Vue-Awesome-Paginate i din Vue-app

Nu har du en enkel Vue-app som hämtar data från ett API, du kan ändra den för att integrera vue-awesome-paginate-paketet. Du kommer att använda den här sideringsfunktionen för att dela upp kommentarerna på olika sidor.

Ersätt manus avsnitt av din App.vue fil med denna kod:

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

Detta kodblock lägger till ytterligare två reaktiva referenser: per sida och nuvarande sida. Dessa referenser lagrar antalet objekt som ska visas per sida respektive det aktuella sidnumret.

Koden skapar också en beräknad ref med namnet visade kommentarer. Detta beräknar omfånget av kommentarer baserat på nuvarande sida och per sida värden. Det returnerar en bit av kommentarer array inom det intervallet, som kommer att gruppera kommentarerna till olika sidor.

Byt nu ut mall avsnittet i din App.vue-fil med följande:

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

De v-för attribut för rendering av listor i denna mall avsnitt pekar på visade kommentarer array. Mallen lägger till vue-awesome-pagete komponent, som utdraget ovan skickar rekvisita till. Du kan lära dig mer om dessa och ytterligare rekvisita i paketets officiella dokumentation på GitHub.

Efter styling av din applikation bör du få en sida som ser ut så här:

Klicka på varje numrerad knapp så ser du en annan uppsättning kommentarer.

Använd paginering eller oändlig rullning för bättre datasurfning

Du har nu en mycket grundläggande Vue-app som visar hur man effektivt paginerar data. Du kan också använda oändlig rullning för att hantera långa datamängder i din applikation. Se till att du överväger din app behov innan du väljer, eftersom sidnumrering och oändlig rullning har för- och nackdelar.