Å bygge en RSS-Visningen Med Vue: Del 2

0
40

Velkommen til Del 2 av denne mini-serien på å bygge en RSS-visningen med Vue. I det siste innlegget, jeg gikk gjennom hvordan jeg bygget min demo med Vue.js og Vuetify på fronten og Webtask på baksiden slutten. Når jeg bygde den første versjonen, visste jeg at det var akkurat thatmdash;en “første” – versjon. Jeg tok noen tid til å jobbe med noen oppdateringer, og mens jeg ikke tør kalle dette en “perfekt” versjon, jeg tror jeg har gjort noen forbedringer, og jeg vil gjerne dele dem med deg.

Artikkel-Serien:

  1. Oppsett og første iterasjon
  2. Avgrensninger og siste versjon (Dette Innlegget)

Før jeg kommer i gang, her er lenker til ferdig demo og kildekode.

Se Demo Se Kode

Føl deg fri til å gaffel, fil PRs, og rapportere feil til ditt hjerte innhold!

Planen

Når jeg delte den første versjonen i Del 1, vil jeg skissert noen ideer for å forbedre RSS-leser, inkludert:

  • Flytte til Vuex.
  • Begynner å slå til komponenter i layout. (Vel, jeg var allerede bruker Vuetify komponenter, men jeg mente tilpassede komponenter for søknaden min.)
  • Ved hjelp av IndexedDB til å lagre fôret elementer for å få raskere tilgang og offline støtte.

Det var planen, og som de fleste planer, jeg var ikke nødvendigvis i stand til å treffe alt i denne oppdateringen (og jeg vil forklare hvorfor på slutten). Men forhåpentligvis vil du se forbedringer som en generell “bevegelse i riktig retning” for programmet. Med det ute av veien, la oss komme i gang!

Implementering Vuex

Jeg vil starte med å diskutere den største endringen til programmet, tillegg av Vuex. Som jeg sa i forrige innlegg, Vuex beskriver seg selv som en “state management mønster + – bibliotek” på sine “Hva er Vuex” side. Ingen forbrytelse dokumentasjon deres, men jeg hadde en vanskelig tid å pakke hodet mitt rundt akkurat hva dette betydde, fra et praktisk forstand.

Etter å ha brukt det i et par små prosjekter nå, jeg kommer til å sette pris på hva det gir. For meg, kjernen fordel er å tilby en sentral grensesnitt til dine data. Hvis jeg har fått en grunnleggende Vue app arbeider med en rekke verdier, kan jeg ha flere ulike metoder som endrer det. Hva skjer når jeg begynner å få visse regler som må brukes før data endres? Som et enkelt eksempel, tenk deg en variasjon av RSS-strømmer. Før jeg legger til en ny en, jeg ønsker å sikre at det ikke allerede finnes i listen. Hvis jeg har en metode som legger til fôr listen, som ikke er et problem, men hvis jeg har mer, det kan bli tungvint å holde det logikk i synkronisere på tvers av de ulike metodene. Jeg kunne bare bygge et verktøy for å gjøre dette, men hva skjer når jeg har andre komponenter i spill så godt?

Mens det er absolutt ikke et en-til-en sammenligning, jeg føler meg som Vuex minner meg om hvordan Leverandører eller Tjenester arbeid i Kantete. Hvis jeg noen gang vil gjøre arbeidet med data, jeg vil sørge for at jeg bruker en sentral leverandør til å håndtere alle tilgang til disse dataene. Det er hvordan jeg ser på Vuex.

Så den store endringen i dette programmet var å migrere alle data som er knyttet varer til en butikk. Jeg begynte med å legge biblioteket til min HTML:

<script src=”https://unpkg.com/vuex”></script>

Woot! Halvveis ferdig! (OK, kanskje ikke.)

Så har jeg opprettet en forekomst av mine store i min JavaScript-fil:

const feedStore = new Vuex.Store({
// massevis av ting her
});

og inkluderte det i min Vue-appen:

lar appen = new Vue({
el: ‘#app’,
butikk:feedStore,
// massevis av ting her også…
});

Nå kommer det interessante. Helst min Vue behov for data, som i hovedsak består av liste over feeder og elementer fra de feeds, det kommer til å spørre butikken for dem. Så, for eksempel, min feeds verdi er nå beregnet til:

feeder() {
tilbake feedStore.staten.- feeds;
},

Dette er nå definert i den statlige delen av butikken min:

tilstand: {
allItems: [],
– feeds: [],
selectedFeed: null
},

Legg merke til at feeds standard til en tom tabell. Jeg hadde tidligere brukt opprettet tilfelle av min Vue-appen til å lese inn data fra localStorage. Nå spør jeg i butikken å gjøre det på:

opprettet() {
feedStore.utsendelse(‘restoreFeeds’);
},

Tilbake i butikken, logikken er ganske mye det samme:

restoreFeeds(kontekst) {
la feedsRaw = vinduet.localStorage.getItem(‘feeder’);
hvis(feedsRaw) {
try {
la feeds = JSON.parse(feedsRaw);
sammenheng.staten.- feeds = feeds;
sammenheng.staten.- feeder.forEach(f => {
sammenheng.utsendelse(‘loadFeed’, f);
});
} catch(e) {
– konsollen.error(‘Feil gjenopprette mate json’+e);
// bad json eller andre problem, nuke det
vinduet.localStorage.removeItem(‘feeder’);
}
}
},

Jeg sier “ganske mye det samme”, bortsett fra nå jeg gjør litt av feilsøking på verdien lese i fra localStorage. Men her er det viktig bit. Jeg har allerede sagt at jeg strøk i form av å bytte til IndexedDB, men i teorien, kunne jeg bygge en tredje versjon av dette programmet med en oppdatert store og min Vue app vil ikke vet forskjellen. Og det er der jeg begynte å bli veldig spent. Jo mer jeg arbeidet, jo flere “dumme” min Vue app ble og mindre knyttet det var til noen bestemt gjennomføring av lagring. La oss se på den komplette Vue appen nå:

lar appen = new Vue({
el: ‘#app’,
butikk:feedStore,
data() {
tilbake {
skuff:true,
addFeedDialog:false,
addURL:”,
urlError:false,
urlRules:[],
selectedFeed:null
}
},
beregnet: {
showIntro() {
gå tilbake til denne.- feeder.lengde == 0;
},
feeder() {
tilbake feedStore.staten.- feeds;
},
elementer() {
tilbake feedStore.getters.elementer;
}
},
opprettet() {
feedStore.utsendelse(‘restoreFeeds’);
},
metoder:{
addFeed() {
dette.addFeedDialog = true;
},
allFeeds() {
feedStore.utsendelse(‘filterFeed’, null);
},
addFeedAction() {
dette.urlError = false;
dette.urlRules = [];

feedStore.utsendelse(‘addFeed’, {url:dette.addURL})
.deretter(res => {
dette.addURL = “;
dette.addFeedDialog = false;
})
.catch(e =>{
– konsollen.logg(‘err å legge til’, e);
dette.urlError = true;
dette.urlRules = [“URL allerede eksisterer.”];
});
},
deleteFeed(feed) {
feedStore.utsendelse(‘deleteFeed’, feed);
},
filterFeed(feed) {
feedStore.utsendelse(‘filterFeed’, feed);
}
}
})

Det du vil merke er at ganske mye alle de faktiske logikk er nå borte, og alt jeg egentlig gjør her er UI ting. Åpne en modal her, kan du legge en feil der, og så videre.

Du kan se den komplette butikk her, selv om jeg beklager for lumping alt sammen i én fil.

Å legge til en Komponent

En av de andre endringene jeg nevnte var i ferd med å “komponent-ize” vis-lag. Jeg endte opp med å bare ta én komponent, fôr-elementet. Dette reduserte antall linjer i HTML litt:

<v-flex xs12 v-=”element i elementer” :key=”element.link”>
<feed-element :title=”element.title” :content=”element.innhold :link=”element.link” :feedtitle=”element.feedTitle” :color=”element.feedColor” :posted=”element.pubDate”></feed-element>
</v-flex>

Det har ikke endret på noen måte, men det gjorde det litt lettere for meg da jeg begynte å jobbe på fôr displayet. Som jeg bruker ikke en fancy builder ennå, jeg er definert min komponent rett i JavaScript som så:

Vue.komponent (“feed-post’, {
rekvisittar:[
‘color’,’tittel’,’innhold’,’link’,’feedtitle’, ‘skrevet’
],
mal: `
<v-kort :color=”color”>
<v-card-tittel på primær-tittel>
<div class=”overskrift”>{{tittel}} ({{lagt ut | dtFormat}})</div>
</v-card-tittel>
<v-card-tekst>
{{innhold | maxText }}
</v-card-tekst>
<v-card-tjenesteaktivitet>
<v-btn flatskjerm target=”_new” :href=”link”>Les på {{feedtitle}}</v-btn>
</v-card-tjenesteaktivitet>
</v-kort>
`
});

Jeg er ikke gjør noe i det hele tatt har lyst på i heremdash, det er ingen dynamisk logikk eller hendelser, eller noe sånt, men jeg kan sikkert legge til at senere, hvor det er fornuftig. Jeg fikk endelig komme seg rundt for å legge til dato og klokkeslett for oppslaget. Hvis du er nysgjerrig på hvordan jeg har bygget formatter brukt for det, les min artikkel Bygge En i18n-Filteret Bruker Vue.js & Native Web Spesifikasjoner.”

Makt Slett!

Oh, og jeg endelig lagt en måte å slette feeds:

Søppel kan ikonet, FTW!

Dette bare fyrer av en metode på Vue objekt som, i sin tur, fyrer av en ringer til butikken som tar seg av å fjerne fôr og elementer fra UI og da vedbli det. En liten ting, men wow, gjorde jeg skulle ønske jeg hadde det i den første versjonen ved testing. Og her er et siste bilde av alt:

Fantastisk app i alt er det awesomeness

Neste Trinn… og Hva Skjedde IndexedDB?

Som jeg sa i begynnelsen, er denne versjonen er fortsatt ikke perfekt, men jeg føler definitivt bedre om det. Jeg sterkt oppfordre deg til å dele tips, forslag, og bug-rapporter i kommentarfeltet nedenfor eller på GitHub-repo.

Så hva skjedde med IndexedDB støtte? Problemet jeg støtte på var hvordan du skal initialisere databasen. Vuex lagrer ikke har et konsept av en opprettet prosessen. Jeg kunne ha gjort noe sånt som dette:

// dummy-kode for å få feeder
utsendelse(‘getDB’)
.deretter(() =>
// gjør ting
);

Der getDB handling returnerer et løfte og håndtak gjør en en-gang IndexedDB åpne og lagre verdien i staten. Jeg kan gi dette en sjanse senere, og igjen, hva jeg elsker om Vuex er at jeg vet jeg kan trygt gjøre det uten å forstyrre resten av programmet.

Artikkel-Serien:

  1. Oppsett og første iterasjon
  2. Avgrensninger og siste versjon (Dette Innlegget)

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!