Sissejuhatus Piniasse Vue.js-is

Võtmed kaasavõtmiseks

• Pinia on Vue riigihalduse raamatukogu, mis toob rakenduste arendusse lihtsuse ja tõhususe, keskendudes minimalismile ja intuitiivsele lähenemisele.
• Pinia põhikontseptsioonid hõlmavad hankijaid, toiminguid, salvestamist ja olekut, mis võimaldavad arendajatel oma Vue komponentides andmeid tõhusalt hallata ja jagada.
• Võrreldes Vuexiga pakub Pinia kaasaegsemat ja minimalistlikumat lähenemist, kasutades Vue reaktiivsussüsteemi ning pakkudes rangemat tippimist ja TypeScripti tuge tugevamate rakenduste jaoks, millel on vähem vigu. See on elujõuline võimalus uute projektide jaoks või Vuexist migreerumiseks.

Kas olete Vue arendaja, kes soovib oma osariigi juhtimist sujuvamaks muuta ja rakenduste arendamise uutesse kõrgustesse viia? Öelge tere Piniale, Vue entusiastide jaoks muutlikule riigihalduse raamatukogule.

Heitke samm-sammult pilk Pinia põhikontseptsioonidele ja vaadake, kuidas saate selle potentsiaali avada. Siit saate teada, kuidas seda teeki võrrelda Vuexiga, ja õppige, kuidas luua lihtsat Pinia rakendust.

Mis on Pinia?

Pinia on spetsiaalselt riigijuhtimise raamatukogu loodud Vue jaoks, mille eesmärk on tuua teie Vue projektidesse võrratu lihtsus ja tõhusus. Pinia, mis on välja töötatud selleks, et pakkuda Vue arendajatele sujuvat kogemust, ammutab inspiratsiooni ettevõtte parimatest tavadest. kaasaegne riigihaldus, olles samas äärmiselt kerge ja hõlpsasti integreeritav teie rakendustesse.

Pinia filosoofia on hoida asjad minimaalsed ja elegantsed, muutes arendajatel rakenduse oleku haldamise lihtsaks. Lihtsa ja intuitiivse lähenemisega Pinia võimaldab teil keskenduda kõige olulisemale ja pakkuda Vue rakenduse loomisel erakordset kasutuskogemust.

Pinia põhikontseptsioonid

Piniast maksimumi saamiseks on oluline mõista selle põhimõisteid.

Getterid

Pinia Getterid vastutavad konkreetsete väärtuste hankimise ja tagastamise eest poe olekust. Getterite määratlemisega saate tõhusalt juurde pääseda andmetele ja neid töödelda ilma nende aluseks oleva olekuga otseselt manipuleerimata. Mõelge neile kui arvutatud omadustele, mis on kohandatud teie poe olekule.

Tegevused

Toimingud mängivad Pinias üliolulist rolli, võimaldades teil asünkroonsete või sünkroonsete toimingute abil poe olekut muuta. Need toimivad sillana teie rakenduse komponentide ja poe vahel, tagades, et olekumutatsioonid järgivad prognoositavaid mustreid ja järgivad parimaid tavasid.

Kauplus

Pood esindab Pinia südant, hõlmates rakenduse oleku, getterid, toimingud ja mutatsioonid (kui neid on). See toimib ühe tõeallikana, hoides teie rakenduse oleku tsentraliseeritud ja hõlpsasti juurdepääsetavana kõigis teie komponentides.

osariik

Olek viitab andmetele, mida teie pood haldab. Need on reaktiivsed andmed, millele teie komponendid tuginevad, et kuvada kasutajale kõige värskemat teavet. Kasutades poes olekuobjekti, saate komponentide vahel andmeid sujuvalt hallata ja jagada.

Aga Vuex?

Võite küsida, kuidas Pinia võrreldakse Vuexiga, mis on Vue arendajatele juba mõnda aega olnud riigihalduse raamatukogu. Kui Vuex on kahtlemata jõuline ja võimas lahendus, siis Pinia eristab end kaasaegsema ja minimalistlikuma lähenemisega.

Pinia kasutab oleku haldamiseks Vue reaktiivsussüsteemi, vältides vajadust väliste sõltuvuste järele. See tähendab, et Pinia ökosüsteem on rohkem keskendunud ja väldib võimalikku paisumist. Lisaks võimaldab selle pakutav range tippimis- ja TypeScript-tugi tuvastada vead arendusprotsessi varajases staadiumis, mis viib töökindlamate ja vähemate vigadega rakendusteni.

Kui alustate uut Vue projekti või kaalute Vuexist migreerumist, pakub Pinia atraktiivset alternatiivi, mis muudab riigihalduse sujuvamaks ilma paindlikkuse või jõudluse osas järeleandmisi tegemata.

Lihtne Vue rakendus Pinia abil

Pinia kohta kõike teada saamiseks proovige luua näidisrakendus; a põhiülesannete loendi haldur on hea kandidaat. Ülesannete loendi rakendusel on lihtne struktuur, kuhu kasutajad saavad lisada ülesandeid, märkida ja näidata nende täitmist ning vajadusel töid kustutada ja redigeerida. Pinia pakub selliste rakenduste oleku haldamiseks vajalikke tööriistu.

Eeldused

Kõigepealt peate selle projekti jaoks ette valmistama vajaliku keskkonna, alustades Vue CLI-st.

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

Selles etapis näete terminalis, et peate valima eelseadistuse. Saate jätkata, valides Vue 3 vaikeseadetest; see näide teeb jätkake Vue 3 kasutamist.

Nüüd saate Pinia oma projekti kausta installida:

cd pinia-todo-app
npm install pinia

Seadistage oma failid

Selle näidisprojekti lõpuleviimiseks peate lihtsalt redigeerima mõnda faili.

Esiteks looge fail nimega store.js all src kausta. See fail hoiab, lisab ja kustutab üksusi, mille lisate ülesannete loendisse. See teeb kõike seda kasutades Pinia põhikontseptsioone.

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

Kuid loomulikult ei piisa ainult sellest failist. Peate linkima store.js faili koos App.vue. Selleks muutke src/App.vue faili järgmiselt:

// src/App.vue