Úvod do Pinia ve Vue.js

Klíčové věci

• Pinia je knihovna pro správu stavu pro Vue, která přináší jednoduchost a efektivitu do vývoje aplikací se zaměřením na minimalismus a intuitivní přístup.
• Základní koncepty Pinia zahrnují getry, akce, úložiště a stav, které umožňují vývojářům efektivně spravovat a sdílet data v jejich komponentách Vue.
• Ve srovnání s Vuexem nabízí Pinia modernější a minimalistický přístup, využívá systém reaktivity Vue a poskytuje přísné psaní a podporu TypeScript pro robustnější aplikace s menším počtem chyb. Je to životaschopná možnost pro nové projekty nebo migraci z Vuexu.

Jste vývojář Vue, který chce zefektivnit správu svého stavu a posunout vývoj aplikací do nových výšin? Pozdravte Pinia, knihovnu pro správu stavu hry pro nadšence Vue.

Podívejte se krok za krokem na základní koncepty Pinia a zjistěte, jak můžete odemknout její potenciál. Zjistěte, jak si tato knihovna stojí v porovnání s Vuexem, a zjistěte, jak vytvořit jednoduchou aplikaci Pinia.

Co je Pinia?

Pinia je speciálně státní manažerská knihovna vytvořeno pro Vue, navržený tak, aby přinesl bezkonkurenční jednoduchost a efektivitu do vašich projektů Vue. Pinia, vyvinutá tak, aby poskytovala bezproblémový zážitek pro vývojáře Vue, se inspiruje osvědčenými postupy moderní správu stavu a přitom je extrémně lehký a snadno se integruje do vašich aplikací.

Filozofií společnosti Pinia je udržovat věci minimální a elegantní, takže vývojáři mohou snadno spravovat stav aplikace. Díky jednoduchému a intuitivnímu přístupu vám Pinia umožňuje soustředit se na to, na čem nejvíce záleží, a poskytovat výjimečný uživatelský zážitek při vytváření vaší aplikace Vue.

Základní koncepty Pinia

Chcete-li z Pinie vytěžit maximum, je nezbytné porozumět jejím základním konceptům.

Getry

Getteři v Pinia jsou zodpovědní za extrahování a vracení konkrétních hodnot ze stavu obchodu. Definováním getterů můžete efektivně přistupovat k datům a zpracovávat je bez přímé manipulace se základním stavem. Představte si je jako vypočítané vlastnosti přizpůsobené stavu vašeho obchodu.

Akce

Akce hrají v Pinia klíčovou roli a umožňují vám upravovat stav obchodu prováděním asynchronních nebo synchronních operací. Slouží jako most mezi komponentami vaší aplikace a úložištěm a zajišťují, že stavové mutace sledují předvídatelné vzorce a dodržují osvědčené postupy.

Obchod

Obchod představuje srdce Pinia, zapouzdřuje stav aplikace, getry, akce a mutace (pokud existují). Funguje jako jediný zdroj pravdy, udržuje stav vaší aplikace centralizovaný a snadno dostupný ve všech vašich komponentách.

Stát

Stav označuje data, která váš obchod spravuje. Jsou to reaktivní data, na která vaše komponenty spoléhají, aby uživateli zobrazily nejaktuálnější informace. Pomocí objektu stavu v rámci úložiště můžete bezproblémově spravovat a sdílet data mezi komponentami.

A co Vuex?

Možná vás zajímá, jak si Pinia stojí v porovnání s Vuexem, což je knihovna pro správu stavu pro vývojáře Vue již nějakou dobu. Zatímco Vuex je bezpochyby robustní a výkonné řešení, Pinia se odlišuje modernějším a minimalistickým přístupem.

Pinia používá systém reaktivity Vue ke správě stavu, čímž se vyhne nutnosti jakýchkoli externích závislostí. To znamená, že ekosystém Pinia je více zaměřený a vyhýbá se potenciálnímu nadýmání. Navíc přísné psaní a podpora TypeScript, kterou poskytuje, vám umožní zachytit chyby v rané fázi vývojového procesu, což vede k robustnějším aplikacím s menším počtem chyb.

Pokud zahajujete nový projekt Vue nebo uvažujete o migraci z Vuexu, Pinia nabízí atraktivní alternativu, která zjednodušuje správu státu bez kompromisů v oblasti flexibility nebo výkonu.

Jednoduchá aplikace Vue využívající Pinia

Chcete-li se dozvědět vše o Pinia, zkuste vytvořit ukázkovou aplikaci; A základní správce seznamu úkolů je dobrý kandidát. Aplikace se seznamem úkolů má jednoduchou strukturu, kde uživatelé mohou přidávat úkoly, označovat a označovat jejich dokončení a mazat a upravovat úkoly podle potřeby. Pinia poskytuje nástroje, které potřebujete ke správě stavu pro takové aplikace.

Předpoklady

Nejprve musíte připravit potřebné prostředí pro tento projekt, počínaje 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 této fázi můžete v terminálu vidět, že musíte vybrat předvolbu. Můžete pokračovat výběrem Vue 3 z výchozího nastavení; tento příklad bude pokračovat v používání Vue 3.

Nyní můžete nainstalovat Pinia do složky projektu:

cd pinia-todo-app
npm install pinia

Nastavte si soubory

K dokončení tohoto ukázkového projektu stačí upravit několik souborů.

Nejprve vytvořte soubor s názvem store.js pod src složku. Tento soubor bude obsahovat, přidávat a odstraňovat položky, které přidáte do seznamu úkolů. To vše provede pomocí základních konceptů 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);
 },
 },
});

Ale samozřejmě tento soubor sám o sobě nestačí. Musíte propojit store.js soubor s App.vue. Chcete-li tak učinit, změňte src/App.vue soubor takto:

// src/App.vue