Uvod u Piniu u Vue.js

Ključni zahvati

• Pinia je biblioteka za upravljanje stanjem za Vue koja donosi jednostavnost i učinkovitost u razvoj aplikacija, s fokusom na minimalizam i intuitivan pristup.
• Temeljni koncepti Pinije uključuju getere, akcije, pohranu i stanje, koji programerima omogućuju učinkovito upravljanje i dijeljenje podataka u svojim Vue komponentama.
• U usporedbi s Vuexom, Pinia nudi moderniji i minimalistički pristup, koristeći Vueov sustav reaktivnosti i pružajući striktno tipkanje i TypeScript podršku za robusnije aplikacije s manje grešaka. To je održiva opcija za nove projekte ili migraciju s Vuexa.

Jeste li Vue programer koji želi pojednostaviti svoje upravljanje stanjem i podići razvoj svoje aplikacije na nove visine? Pozdravite Piniu, biblioteku za upravljanje stanjem koja mijenja igru ​​za Vue entuzijaste.

Pogledajte korak po korak Pinijine temeljne koncepte i pogledajte kako možete otključati njezin potencijal. Saznajte kakva je ova biblioteka u usporedbi s Vuexom i naučite kako izraditi jednostavnu aplikaciju Pinia.

Što je Pinia?

Pinia je posebno državna knjižnica za upravljanje izrađen za Vue, osmišljen da donese neusporedivu jednostavnost i učinkovitost u vaše Vue projekte. Razvijena da pruži besprijekorno iskustvo za Vue programere, Pinia crpi inspiraciju iz najboljih praksi moderno upravljanje stanjem dok je iznimno lagan i jednostavan za integraciju u vaše aplikacije.

Filozofija iza Pinije je da stvari budu minimalne i elegantne, što programerima olakšava upravljanje stanjem aplikacije. Korištenjem jednostavnog i intuitivnog pristupa, Pinia vam omogućuje da se usredotočite na ono što je najvažnije i pružate iznimno korisničko iskustvo pri izradi vaše aplikacije Vue.

Temeljni Pinia koncepti

Kako biste maksimalno iskoristili Piniu, bitno je razumjeti njezine osnovne koncepte.

Dobivači

Getteri u Piniji odgovorni su za izvlačenje i vraćanje određenih vrijednosti iz stanja pohrane. Definiranjem gettera možete učinkovito pristupiti i obraditi podatke bez izravne manipulacije temeljnim stanjem. Zamislite ih kao izračunata svojstva prilagođena stanju vaše trgovine.

Radnje

Radnje igraju ključnu ulogu u Piniji, omogućujući vam da modificirate stanje trgovine izvođenjem asinkronih ili sinkronih operacija. Oni služe kao most između komponenti vaše aplikacije i trgovine, osiguravajući da mutacije stanja slijede predvidljive obrasce i pridržavaju se najboljih praksi.

Store

Trgovina predstavlja srce Pinije, enkapsulirajući stanje aplikacije, getere, radnje i mutacije (ako postoje). Djeluje kao jedinstveni izvor istine, održavajući stanje vaše aplikacije centraliziranim i lako dostupnim kroz vaše komponente.

država

Stanje se odnosi na podatke kojima vaša trgovina upravlja. To su reaktivni podaci na koje se vaše komponente oslanjaju kako bi korisniku prikazale najažurnije informacije. Korištenjem objekta stanja unutar pohrane možete neprimjetno upravljati i dijeliti podatke među komponentama.

Što je s Vuexom?

Možda se pitate kakva je Pinia u usporedbi s Vuexom, koji je već duže vrijeme bio knjižnica za upravljanje stanjem za Vue programere. Dok je Vuex nedvojbeno robusno i snažno rješenje, Pinia se izdvaja modernijim i minimalističkim pristupom.

Pinia koristi Vueov sustav reaktivnosti za upravljanje stanjem, izbjegavajući potrebu za vanjskim ovisnostima. To znači da je ekosustav pinije više fokusiran i izbjegava potencijalno nadimanje. Osim toga, striktno tipkanje i podrška za TypeScript koje pruža omogućuju vam da uhvatite pogreške rano u procesu razvoja, što dovodi do robusnijih aplikacija s manje grešaka.

Ako pokrećete novi Vue projekt ili razmišljate o prelasku s Vuexa, Pinia nudi atraktivnu alternativu koja pojednostavljuje upravljanje stanjem bez ugrožavanja fleksibilnosti ili izvedbe.

Jednostavna aplikacija Vue koja koristi Pinia

Kako biste saznali sve o Piniji, pokušajte izraditi primjer aplikacije; a upravitelj osnovnog popisa obaveza je dobar kandidat. Aplikacija s popisom obveza ima jednostavnu strukturu u kojoj korisnici mogu dodavati zadatke koje treba obaviti, označavati i naznačiti njihov završetak te po potrebi brisati i uređivati ​​poslove. Pinia pruža alate koji su vam potrebni za upravljanje stanjem za takve aplikacije.

Preduvjeti

Prije svega, morate pripremiti potrebno okruženje za ovaj projekt, počevši od Vue CLI.

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

U ovoj fazi na terminalu možete vidjeti da trebate odabrati unaprijed postavljenu postavku. Možete nastaviti odabirom Prikaz 3 iz zadanih postavki; ovaj će primjer nastavite koristiti Vue 3.

Sada možete instalirati Pinia u svoju mapu projekta:

cd pinia-todo-app
npm install pinia

Postavite svoje datoteke

Trebate samo urediti nekoliko datoteka da biste dovršili ovaj primjer projekta.

Najprije stvorite datoteku pod nazivom trgovina.js ispod src mapa. Ova datoteka će sadržavati, dodavati i brisati stavke koje ćete dodati na popis obaveza. Sve će to učiniti koristeći Pinia temeljne koncepte.

// 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);
 },
 },
});

Ali, naravno, samo ova datoteka nije dovoljna. Morate povezati trgovina.js datoteka sa App.vue. Da biste to učinili, promijenite src/App.vue datoteku na sljedeći način:

// src/App.vue