Pinia bemutatĂł
A Pinia eredetileg egy kĂsĂ©rlet volt, hogy megmutassa, milyen lehet egy ĂĄllapotkezelĆ, amely a Composition API-ra Ă©pĂŒl. AzĂłta azonban olyan fejlettĂ© vĂĄlt, hogy a Vue 3 alapĂ©rtelmezett ĂĄllapotkezelĆ könyvtĂĄrakĂ©nt ismert.
Ez a könyvtĂĄr szĂĄmos elĆnnyel rendelkezik, pĂ©ldĂĄul tĂpusbiztossĂĄggal, komponens alapĂș architektĂșrĂĄval, skĂĄlĂĄzhatĂłsĂĄggal, aszinkron mƱveletek tĂĄmogatĂĄsĂĄval Ă©s alapĂ©rtelmezett integrĂĄciĂłval a Vue Devtools-ba.
TelepĂtĂ©s
Ha telepĂteni szeretnĂ©d a Pinia-t, nem kell aggĂłdnod, mert nagyon egyszerƱ a folyamat. ElĆször generĂĄlj egy Ășj Vue 3 projektet a npm init vue@latest
paranccsal. EzutĂĄn telepĂtsd fel a Pinia-t a npm install pinia
parancs segĂtsĂ©gĂ©vel, majd telepĂtsd a projekt fĂŒggĆsĂ©geit a npm install
parancs futtatĂĄsĂĄval. VĂ©gĂŒl regisztrĂĄld a Pinia-t middleware fĂŒggvĂ©nykĂ©nt az alkalmazĂĄsodba.
Mappa struktĂșra
A mappa struktĂșra tekintetĂ©ben a következĆt javaslom: src/stores/store.js
. Fontos megjegyezni, hogy egy alkalmazĂĄsban több store is lehet, attĂłl fĂŒggĆen, hogy mennyire szeretnĂ©d szeparĂĄlni Ćket. PĂ©ldĂĄul lehetne egy TaskStore
Ă©s egy UserStore
.
A store definiĂĄlĂĄsĂĄhoz importĂĄlnod kell a defineStore
fĂŒggvĂ©nyt a Pinia-bĂłl. A defineStore
elsĆ argumentuma a store neve, a mĂĄsodik argumentum pedig egy objektum, amely tartalmazza a state-et, gettereket Ă©s action-öket. ExportĂĄld ki a store-t egy vĂĄltozĂłkĂ©nt, hogy hasznĂĄlni tudd azt a Vue komponensekben.
State
A state
egyszerƱen egy objektum, amelyben tĂĄrolĂłdik az aktuĂĄlis ĂĄllapot. Ezt a state-et az egĂ©sz alkalmazĂĄson belĂŒl elĂ©rheted. KĂ©pzeld el Ășgy, mint a Vue 2-ben a data
tulajdonsĂĄgot.
PĂ©ldakĂ©nt mutatok egy listĂĄzĂĄsra vonatkozĂł kĂłdrĂ©szletet. ElĆször importĂĄld be a useTaskStore
store-t a komponensedbe, majd a setup
fĂŒggvĂ©nyben rendeld hozzĂĄ egy vĂĄltozĂłhoz, pĂ©ldĂĄul taskStore
.
Ebben a vĂĄltozĂłban mĂĄr elĂ©rhetĆek a state-ben talĂĄlhatĂł adatok, pĂ©ldĂĄul a tasks
, valamint a getterekben talĂĄlhatĂł fĂŒggvĂ©nyek is.
Actions
Az actions
azonos feladatot lĂĄt el, mint a Vuex-ben talĂĄlhatĂł actions
Ă©s mutations
. Ez azt jelenti, hogy ez az egyetlen mĂłdja az ĂĄllapot mĂłdosĂtĂĄsĂĄnak. Szerintem ez sokkal egyszerƱbb Ă©s hasznĂĄlhatĂłbb. Az actions
-öket hasznĂĄlhatod az ĂĄllapot frissĂtĂ©sĂ©re vagy adatok lekĂ©rĂ©sĂ©re egy kĂŒlsĆ API-bĂłl, majd az ĂĄllapot frissĂtĂ©sĂ©re.
Az actions
-öket a Vuex-hoz kĂ©pest az alĂĄbbi mĂłdon hasznĂĄlhatnĂĄd (mutation-ök segĂtsĂ©gĂ©vel). A Pinia leegyszerƱsĂti ezt a folyamatot, Ăgy nem szĂŒksĂ©ges az extra lĂ©pĂ©s.
PĂ©lda egy action
-re: bemutatok egy egyszerƱ formot, amely a Pinia store-t hasznĂĄlja a feladatok mentĂ©sĂ©hez. Az Ʊrlap elkĂŒldĂ©sekor a handleSubmit
fĂŒggvĂ©ny hĂvĂłdik meg, amely ellenĆrzi, hogy van-e Ă©rtĂ©ke az inputnak, Ă©s ha van, meghĂvja a store addTask
fĂŒggvĂ©nyĂ©t, amely egy objektumot vĂĄr paramĂ©terkĂ©nt.
Getters
A getters
fĂŒggvĂ©nyeket az adatok manipulĂĄlĂĄsĂĄra hasznĂĄljuk. PĂ©ldĂĄul, ha van egy feladatok tömbĂŒnk, Ă©s szeretnĂ©nk lekĂ©rdezni belĆle a kedvenc feladatokat vagy az összes feladat szĂĄmĂĄt, akkor a getters
fĂŒggvĂ©nyeket hasznĂĄlhatjuk. Ezek a getters
-ek gyakorlatilag olyanok, mint a szĂĄmĂtott tulajdonsĂĄgok.
PĂ©lda egy getter
-re: egyszerƱen Ășgy hasznĂĄlhatod, mintha a state-t kĂ©rdeznĂ©d le, Ă©s hivatkozhatsz egy getter
-re az adott store-bĂłl.
Devtools
A Pinia Devtools hasznĂĄlatĂĄhoz telepĂtsd fel a bĆvĂtmĂ©nyt a Chrome böngĂ©szĆdbe a következĆ linken: Pinia Devtools.
LehetĆvĂ© teszi a fejlesztĆk szĂĄmĂĄra, hogy könnyen kövessĂ©k Ă©s elemezzĂ©k az alkalmazĂĄs ĂĄllapotĂĄt, illetve nyomon kövessĂ©k az ĂĄllapotvĂĄltozĂĄsokat Ă©s azok következmĂ©nyeit.
Az ĂĄllapotfa hasznĂĄlatĂĄval a state-k mĂłdosĂthatjuk, Ăgy könnyedĂ©n tesztelhetĆek az alkalmazĂĄsok. EzenkĂvĂŒl lehetĆsĂ©get nyĂșjt a mƱveletek idĆbeli elemzĂ©sĂ©re Ă©s a közvetlen idĆutazĂĄsra, ami nagyon hasznos lehet a hibakeresĂ©s sorĂĄn.
DokumentĂĄciĂł
Ha tovĂĄbbi infĂłkat szeretnĂ©l megtudni a Pinia mƱködĂ©sĂ©rĆl, akkor nagyon hasznos tud lenni a hivatalos dokumentĂĄciĂłja
https://pinia.vuejs.org/