Uvod v Pinio v Vue.js

Ključni zaključki

• Pinia je knjižnica za upravljanje stanja za Vue, ki v razvoj aplikacij prinaša preprostost in učinkovitost, s poudarkom na minimalizmu in intuitivnem pristopu.
• Osrednji koncepti Pinia vključujejo zbiralnike, dejanja, shranjevanje in stanje, ki razvijalcem omogočajo učinkovito upravljanje in skupno rabo podatkov v njihovih komponentah Vue.
• V primerjavi z Vuexom ponuja Pinia bolj sodoben in minimalističen pristop, ki uporablja sistem reaktivnosti Vue in zagotavlja strogo tipkanje in podporo TypeScript za robustnejše aplikacije z manj hrošči. Je izvedljiva možnost za nove projekte ali selitev iz Vuexa.

Ali ste razvijalec Vue, ki želi poenostaviti svoje upravljanje stanja in popeljati razvoj svoje aplikacije na nove višine? Pozdravite Pinio, knjižnico za upravljanje stanja, ki spreminja igro za navdušence Vue.

Korak za korakom si oglejte Piniine temeljne koncepte in ugotovite, kako lahko sprostite njen potencial. Ugotovite, kakšna je ta knjižnica v primerjavi z Vuexom, in se naučite, kako ustvariti preprosto aplikacijo Pinia.

Kaj je Pinia?

Pinia je knjižnica državne uprave posebej izdelano za Vue, zasnovan tako, da v vaše projekte Vue vnese neprimerljivo preprostost in učinkovitost. Pinia, razvita za zagotavljanje brezhibne izkušnje za razvijalce Vue, črpa navdih iz najboljših praks sodobno upravljanje stanja, medtem ko je izjemno lahek in preprost za integracijo v vaše aplikacije.

Filozofija za Pinio je ohraniti stvari minimalne in elegantne, kar razvijalcem olajša upravljanje stanja aplikacije. S preprostim in intuitivnim pristopom vam Pinia omogoča, da se osredotočite na tisto, kar je najpomembnejše, in zagotavlja izjemno uporabniško izkušnjo pri izdelavi vaše aplikacije Vue.

Temeljni koncepti Pinia

Da bi kar najbolje izkoristili Pinio, je bistveno razumeti njene osnovne koncepte.

Getters

Getterji v Piniji so odgovorni za pridobivanje in vračanje določenih vrednosti iz stanja shrambe. Z definiranjem pridobivalnikov lahko učinkovito dostopate do podatkov in jih obdelujete, ne da bi neposredno manipulirali z osnovnim stanjem. Predstavljajte si jih kot izračunane lastnosti, prilagojene stanju vaše trgovine.

Dejanja

Dejanja igrajo ključno vlogo v Pinii, saj vam omogočajo, da spremenite stanje trgovine z izvajanjem asinhronih ali sinhronih operacij. Služijo kot most med komponentami vaše aplikacije in trgovino ter zagotavljajo, da mutacije stanja sledijo predvidljivim vzorcem in se držijo najboljših praks.

Trgovina

Trgovina predstavlja srce Pinia, ki zajema stanje aplikacije, pridobivalnike, dejanja in mutacije (če obstajajo). Deluje kot en sam vir resnice, saj ohranja stanje vaše aplikacije centralizirano in lahko dostopno v vseh komponentah.

Država

Stanje se nanaša na podatke, ki jih upravlja vaša trgovina. To so reaktivni podatki, na katere se vaše komponente zanašajo, da uporabniku prikažejo najbolj posodobljene informacije. Z uporabo objekta stanja znotraj shrambe lahko nemoteno upravljate in delite podatke med komponentami.

Kaj pa Vuex?

Morda se sprašujete, kakšna je Pinia v primerjavi z Vuexom, ki je že nekaj časa knjižnica za upravljanje stanja za razvijalce Vue. Medtem ko je Vuex nedvomno robustna in zmogljiva rešitev, se Pinia loči s sodobnejšim in minimalističnim pristopom.

Pinia uporablja reaktivni sistem Vue za upravljanje stanja, pri čemer se izogiba potrebi po zunanjih odvisnostih. To pomeni, da je ekosistem Pinia bolj osredotočen in se izogiba morebitnemu napihnjenju. Poleg tega vam podpora za strogo tipkanje in TypeScript, ki jo ponuja, omogoča, da napake odkrijete zgodaj v procesu razvoja, kar vodi do bolj robustnih aplikacij z manj hrošči.

Če začenjate nov projekt Vue ali razmišljate o selitvi iz Vuexa, Pinia ponuja privlačno alternativo, ki poenostavi upravljanje stanja brez ogrožanja prilagodljivosti ali zmogljivosti.

Preprosta aplikacija Vue z uporabo Pinia

Če želite izvedeti vse o Pinii, poskusite sestaviti vzorčno aplikacijo; a osnovni upravitelj seznama opravil je dober kandidat. Aplikacija seznama opravil ima preprosto strukturo, kjer lahko uporabniki dodajajo opravila, označujejo in nakazujejo njihovo dokončanje ter po potrebi brišejo in urejajo opravila. Pinia ponuja orodja, ki jih potrebujete za upravljanje stanja za takšne aplikacije.

Predpogoji

Najprej morate pripraviti potrebno okolje za ta projekt, začenši z Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Na tej stopnji lahko v terminalu vidite, da morate izbrati prednastavitev. Nadaljujete lahko z izbiro Vue 3 iz privzetih nastavitev; ta primer bo nadaljujte z uporabo Vue 3.

Zdaj lahko namestite Pinia v svojo projektno mapo:

cd pinia-todo-app
npm install pinia

Nastavite svoje datoteke

Za dokončanje tega vzorčnega projekta morate le urediti nekaj datotek.

Najprej ustvarite datoteko z imenom store.js pod src mapo. Ta datoteka bo hranila, dodajala in brisala elemente, ki jih boste dodali na seznam opravil. Vse to bo naredil z uporabo osnovnih konceptov Pinia.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Seveda pa samo ta datoteka ni dovolj. Morate povezati store.js datoteka z App.vue. Če želite to narediti, spremenite src/App.vue datoteko na naslednji način:

// src/App.vue