Lõpmatu kerimine on kasulik, kui peate oma rakenduses kuvama suuri andmekogumeid. Siit saate teada, kuidas seda Vue's rakendada.
Lõpmatu kerimine on tehnika, mida saate kasutada rohkema sisu kuvamiseks, kui teie rakenduse kasutaja lehte alla kerib. See välistab vajaduse lehekülgede jagamise järele ja võimaldab rakenduse kasutajatel jätkata suurte andmekogumite sirvimist.
Vue rakenduse seadistamine
Selle õpetuse järgimiseks vajate Vue 3 ja JavaScripti põhiteadmisi. Sa peaksid teadma, kuidas käituda HTTP-päringud Axiosega.
Et alustada õppimist, kuidas rakendage lõpmatut kerimist, looge uus Vue rakendus, käivitades järgmise npm käsk teie eelistatud kataloogis:
npm create vue
Projekti seadistamise ajal palub Vue teil valida oma rakenduse jaoks eelseadistuse. Vali Ei kõigi funktsioonide jaoks, kuna te ei pea oma rakendusse lisama.
Kui olete uue rakenduse loonud, liikuge rakenduse kataloogi ja käivitage järgmine npm käsk vajalike pakettide installimiseks:
npm install axios @iconify/vue @vueuse/core
The npm käsk installib kolm paketti: aksiosid (HTTP-päringute jaoks), @iconify/vue (ikoonide hõlpsaks integreerimiseks Vue's)ja @vueuse/core (pakkudes olulisi Vue kommunaalteenuseid).
Sa kasutad aksiosid ja @iconify/vue andmete toomiseks ja rakendusele ikoonide lisamiseks. @vueuse/core sisaldab Vue utiliite, sealhulgas kasutage InfiniteScrolli komponent lõpmatu kerimise saavutamiseks.
Näideandmete toomine JSONPlaceholder API-st
Lõpmatu kerimise funktsiooni rakendamiseks vajate andmeid. Saate need andmed kõvasti kodeerida või hankida andmeid tasuta võltsitud API allikast, näiteks JSONPlaceholder.
Nende andmete hankimine JSONPlaceholderist jäljendab tegelikke stsenaariume, kuna enamik veebirakendusi hangib andmeid kõvasti kodeeritud andmete asemel andmebaasidest.
Andmete toomiseks API-st oma Vue rakenduse jaoks looge oma kaustas uus kaust src kataloog ja nimetage see api. Looge selles kaustas uus JavaScripti fail ja kleepige järgmine kood:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
exportdefault getComments;
Koodilõik koosneb asünkroonsest funktsioonist API lõpp-punktist kommentaaride saamiseks " https://jsonplaceholder.typicode.com/comments". Seejärel ekspordib see funktsiooni.
Täpsemalt algab koodilõik importimisega aksiosid raamatukogu. Seejärel defineerib kood hankige kommentaare funktsioon kahe argumendiga: max ja jäta vahele.
The hankige kommentaare funktsiooni majad axios.get() meetod, mis teeb URL-ile GET-päringu. URL sisaldab päringu parameetreid max ja jäta vahele, mis interpoleeritakse stringi sees, kasutades malliliteraale (``). See võimaldab teil URL-i edastada dünaamilisi väärtusi.
Funktsioon tagastab seejärel uue massiivi, mis koosneb keha API lõpp-punktist saadud kommentaaridest kaart funktsiooni.
Kui ilmneb viga, logib koodilõik selle konsooli. Seejärel ekspordib koodilõik selle funktsiooni teie rakenduse teistesse osadesse.
Nüüd, kui olete fiktiivsete andmete toomise loogikaga hakkama saanud, saate luua uue komponendi näivate andmete kuvamiseks ja lõputu kerimisfunktsiooni haldamiseks.
Looge uus fail InfiniteScroll.vue aastal src/komponendid kataloogi ja lisage järgmine kood:
