Úvod do Pinia vo Vue.js

Kľúčové poznatky

• Pinia je knižnica správy stavu pre Vue, ktorá prináša jednoduchosť a efektivitu do vývoja aplikácií so zameraním na minimalizmus a intuitívny prístup.
• Základné koncepty Pinia zahŕňajú získavače, akcie, ukladanie a stav, ktoré umožňujú vývojárom efektívne spravovať a zdieľať údaje v ich komponentoch Vue.
• V porovnaní s Vuexom ponúka Pinia modernejší a minimalistickejší prístup, využíva systém reaktivity Vue a poskytuje prísne písanie a podporu TypeScript pre robustnejšie aplikácie s menším počtom chýb. Je to životaschopná možnosť pre nové projekty alebo migráciu z Vuexu.

Ste vývojár Vue, ktorý chce zefektívniť správu svojho štátu a posunúť vývoj aplikácií do nových výšin? Pozdravte Pinia, knižnicu pre správu stavu hry pre nadšencov Vue.

Pozrite sa krok za krokom na základné koncepty Pinia a uvidíte, ako môžete odomknúť jej potenciál. Zistite, ako sa táto knižnica porovnáva s Vuexom a naučte sa, ako vytvoriť jednoduchú aplikáciu Pinia.

Čo je Pinia?

Pinia je špeciálne štátna knižnica vytvorené pre Vue, navrhnutý tak, aby priniesol bezkonkurenčnú jednoduchosť a efektivitu do vašich projektov Vue. Pinia, vyvinutá tak, aby poskytovala bezproblémový zážitok pre vývojárov Vue, sa inšpiruje osvedčenými postupmi moderné riadenie stavu, pričom je extrémne ľahké a jednoducho sa integruje do vašich aplikácií.

Filozofiou spoločnosti Pinia je udržiavať veci minimálne a elegantné, vďaka čomu je pre vývojárov ľahké spravovať stav aplikácie. Vďaka jednoduchému a intuitívnemu prístupu vám Pinia umožňuje zamerať sa na to, na čom najviac záleží, a poskytnúť výnimočnú používateľskú skúsenosť pri vytváraní vašej aplikácie Vue.

Základné koncepty Pinia

Aby ste z Pinie vyťažili maximum, je nevyhnutné porozumieť jej základným pojmom.

Getters

Getry v Pinia sú zodpovedné za extrakciu a vrátenie konkrétnych hodnôt zo stavu obchodu. Definovaním getterov môžete efektívne pristupovať k údajom a spracovávať ich bez priamej manipulácie so základným stavom. Predstavte si ich ako vypočítané vlastnosti prispôsobené stavu vášho obchodu.

Akcie

Akcie zohrávajú v Pinia kľúčovú úlohu a umožňujú vám upravovať stav obchodu vykonávaním asynchrónnych alebo synchrónnych operácií. Slúžia ako most medzi komponentmi vašej aplikácie a obchodom, čím zaisťujú, že stavové mutácie budú nasledovať predvídateľné vzory a budú dodržiavať osvedčené postupy.

Obchod

Obchod predstavuje srdce Pinia, zapuzdrenie stavu aplikácie, getterov, akcií a mutácií (ak existujú). Funguje ako jediný zdroj pravdy a udržiava stav vašej aplikácie centralizovaný a ľahko dostupný v rámci vašich komponentov.

Štát

Stav označuje údaje, ktoré spravuje váš obchod. Sú to reaktívne údaje, na ktoré sa vaše komponenty spoliehajú, aby používateľovi zobrazovali najaktuálnejšie informácie. Pomocou objektu stavu v rámci obchodu môžete bezproblémovo spravovať a zdieľať údaje medzi komponentmi.

A čo Vuex?

Možno sa čudujete, ako sa Pinia porovnáva s Vuexom, ktorý je pre vývojárov Vue už nejaký čas navštevovanou knižnicou pre správu stavu. Zatiaľ čo Vuex je nepochybne robustné a výkonné riešenie, Pinia sa odlišuje modernejším a minimalistickejším prístupom.

Pinia používa systém reaktivity Vue na riadenie stavu, čím sa vyhýba potrebe akýchkoľvek externých závislostí. To znamená, že ekosystém Pinia je viac zameraný a vyhýba sa potenciálnemu nadúvaniu. Okrem toho prísna podpora písania a TypeScript, ktorú poskytuje, vám umožňuje zachytiť chyby na začiatku procesu vývoja, čo vedie k robustnejším aplikáciám s menším počtom chýb.

Ak začínate s novým projektom Vue alebo uvažujete o migrácii z Vuexu, Pinia ponúka atraktívnu alternatívu, ktorá zefektívňuje riadenie štátu bez kompromisov v oblasti flexibility alebo výkonu.

Jednoduchá aplikácia Vue pomocou Pinia

Ak sa chcete dozvedieť všetko o Pinia, skúste vytvoriť vzorovú aplikáciu; a základný správca zoznamu úloh je dobrý kandidát. Aplikácia zoznamu úloh má jednoduchú štruktúru, do ktorej môžu používatelia pridávať úlohy, označovať a označovať ich dokončenie a podľa potreby úlohy odstraňovať a upravovať. Pinia poskytuje nástroje, ktoré potrebujete na správu stavu takýchto aplikácií.

Predpoklady

Najprv musíte pripraviť potrebné prostredie pre tento projekt, počnúc Vue CLI.

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

V tejto fáze môžete v termináli vidieť, že musíte vybrať predvoľbu. Môžete pokračovať výberom Vue 3 z predvolených nastavení; tento príklad bude pokračovať v používaní Vue 3.

Teraz môžete nainštalovať Pinia do priečinka projektu:

cd pinia-todo-app
npm install pinia

Nastavte si súbory

Na dokončenie tohto vzorového projektu stačí upraviť niekoľko súborov.

Najprv vytvorte súbor s názvom store.js pod src priečinok. Tento súbor bude obsahovať, pridávať a odstraňovať položky, ktoré pridáte do zoznamu úloh. To všetko urobí pomocou základných 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);
 },
 },
});

Tento súbor však samozrejme nestačí. Musíte prepojiť store.js súbor s App.vue. Ak to chcete urobiť, zmeňte src/App.vue súbor takto:

// src/App.vue