Pinia įvadas Vue.js

Key Takeaways

• Pinia yra valstybės valdymo biblioteka, skirta Vue, kuri suteikia programų kūrimo paprastumo ir efektyvumo, daugiausia dėmesio skiriant minimalizmui ir intuityviam požiūriui.
• Pagrindinės Pinia sąvokos apima geterius, veiksmus, saugyklą ir būseną, kurios leidžia kūrėjams efektyviai valdyti ir dalytis duomenimis savo Vue komponentuose.
• Palyginti su „Vuex“, „Pinia“ siūlo modernesnį ir minimalistinį požiūrį, naudodama „Vue“ reaktyvumo sistemą ir užtikrindama griežtą spausdinimo bei „TypeScript“ palaikymą patikimesnėms programoms su mažiau klaidų. Tai perspektyvus pasirinkimas naujiems projektams arba perkėlimui iš „Vuex“.

Ar esate „Vue“ kūrėjas, norintis supaprastinti savo valstybės valdymą ir pakelti programų kūrimą į naujas aukštumas? Pasisveikinkite su Pinia – nauja valstybės valdymo biblioteka, skirta Vue entuziastams.

Žingsnis po žingsnio pažvelkite į pagrindines Pinia koncepcijas ir sužinokite, kaip galite išnaudoti jos potencialą. Sužinokite, kaip ši biblioteka palyginama su „Vuex“, ir sužinokite, kaip sukurti paprastą Pinia programą.

Kas yra Pinia?

Pinia yra valstybės valdymo biblioteka specialiai sukurta Vue, sukurta siekiant suteikti jūsų Vue projektams neprilygstamo paprastumo ir efektyvumo. Sukurta siekiant suteikti sklandžią patirtį Vue kūrėjams, Pinia semiasi įkvėpimo iš geriausios praktikos modernus valstybės valdymas, tuo pačiu metu itin lengvas ir nesudėtingas integruoti į jūsų programas.

Pinia filosofija yra tai, kad viskas būtų minimali ir elegantiška, kad kūrėjams būtų nesunku valdyti programos būseną. Taikant paprastą ir intuityvų požiūrį, Pinia leidžia sutelkti dėmesį į tai, kas svarbiausia, ir sukurti išskirtinę vartotojo patirtį kuriant „Vue“ programą.

Pagrindinės Pinia koncepcijos

Norint išnaudoti visas Pinia galimybes, būtina suprasti pagrindines jos sąvokas.

Getteriai

Pinia „Getters“ yra atsakingi už konkrečių verčių išgavimą ir grąžinimą iš parduotuvės būsenos. Apibrėždami geterius, galite efektyviai pasiekti ir apdoroti duomenis tiesiogiai nekeisdami pagrindinės būsenos. Pagalvokite apie jas kaip apie apskaičiuotas savybes, pritaikytas jūsų parduotuvės būsenai.

Veiksmai

Veiksmai atlieka lemiamą vaidmenį Pinia, leidžiantys keisti parduotuvės būseną atliekant asinchronines arba sinchronines operacijas. Jie tarnauja kaip tiltas tarp jūsų programos komponentų ir parduotuvės, užtikrinant, kad būsenos mutacijos atitiktų nuspėjamus modelius ir laikytųsi geriausios praktikos.

Parduotuvė

Parduotuvė yra Pinia širdis, apimanti programos būseną, geterius, veiksmus ir mutacijas (jei tokių yra). Tai veikia kaip vienas tiesos šaltinis, todėl jūsų programos būsena yra centralizuota ir lengvai pasiekiama visuose komponentuose.

valstybė

Būsena nurodo duomenis, kuriuos tvarko jūsų parduotuvė. Tai reaktyvūs duomenys, kuriais remiasi jūsų komponentai, kad vartotojui būtų rodoma naujausia informacija. Naudodami būsenos objektą parduotuvėje galite sklandžiai valdyti ir bendrinti duomenis tarp komponentų.

Ką apie Vuex?

Jums gali kilti klausimas, kaip Pinia lyginama su „Vuex“, kuri ilgą laiką buvo „Vue“ kūrėjų valstybės valdymo biblioteka. Nors Vuex yra neabejotinai tvirtas ir galingas sprendimas, Pinia išsiskiria šiuolaikiškesniu ir minimalistiniu požiūriu.

Pinia naudoja Vue reaktyvumo sistemą būsenai valdyti, vengdama bet kokių išorinių priklausomybių. Tai reiškia, kad Pinia ekosistema yra labiau susitelkusi ir išvengia galimo išsipūtimo. Be to, jo teikiamas griežtas spausdinimo ir „TypeScript“ palaikymas leidžia pastebėti klaidas ankstyvame kūrimo proceso etape, o tai leidžia sukurti patikimesnes programas su mažiau klaidų.

Jei pradedate naują Vue projektą arba ketinate pereiti iš Vuex, Pinia siūlo patrauklią alternatyvą, kuri supaprastina valstybės valdymą, nepakenkiant lankstumui ar našumui.

Paprasta „Vue“ programa naudojant „Pinia“.

Norėdami sužinoti viską apie Pinia, pabandykite sukurti programos pavyzdį; a pagrindinė darbų sąrašo tvarkyklė yra geras kandidatas. Užduočių sąrašo programėlė turi paprastą struktūrą, kurioje vartotojai gali pridėti užduočių, pažymėti ir nurodyti jų atlikimą bei, jei reikia, ištrinti ir redaguoti darbus. Pinia teikia įrankius, kurių reikia norint valdyti tokių programų būseną.

Būtinos sąlygos

Visų pirma, reikia paruošti šiam projektui reikalingą aplinką, pradedant nuo Vue CLI.

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

Šiame etape terminale galite pamatyti, kad reikia pasirinkti išankstinį nustatymą. Galite tęsti pasirinkę Vue 3 iš numatytųjų nustatymų; šis pavyzdys bus toliau naudoti Vue 3.

Dabar galite įdiegti Pinia į savo projekto aplanką:

cd pinia-todo-app
npm install pinia

Nustatykite savo failus

Jums tereikia redaguoti kelis failus, kad užbaigtumėte šį pavyzdinį projektą.

Pirmiausia sukurkite failą pavadinimu store.js pagal src aplanką. Šiame faile bus saugomi, pridėti ir ištrinti elementai, kuriuos įtrauksite į darbų sąrašą. Visa tai ji atliks naudodama pagrindines Pinia koncepcijas.

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

Bet, žinoma, vien šio failo neužtenka. Turite susieti store.js failas su App.vue. Norėdami tai padaryti, pakeiskite src/App.vue failą taip:

// src/App.vue