Pinia — Global State Management
npm install pinia
Pinia ni 2xil usulda yozish mumkin Composition API va Options API.
strukturada farq qiladi. farqi oddiy component qanday farq qilsa shunday .
options API bilan pinia ni tushunish osonroq. ammo Composition API zamonaviyroq. shu sababli avval options API da piniani organamiz va composition APi da qanday bolishi koramiz
pinia 3ta narsadan tashkil topgan
- state - qiymat (ma'lumotni saqlaydi)
- getter - hisob kitob (ma'lumotni hisoblaydi)
- action - function (ma'lumotni o'zgartiradi)
Header.vue da +1 bosilsa — App.vue da ham yangilanadi. Chunki ikkalasi bir xil storeni ishlatmoqda.
yuqoridagi misolda state va action ishlatilgan. storeni chaqirib istalgan joyda ishlatamiz action bajarilganda hamma joyda qiymatlar avtomatik ozgaradi
Getter — hisoblangan qiymat
State dagi ma'lumotdan yangi qiymat hisoblash uchun ishlatiladi. computed ga o'xshash.
qiymatni ozgartirish emas faqat biror hisob kitob qilib qaytarish kerak bolsa ishlatiladi.
Options APIda
Composition API da
State o'zgarsa — getter avtomatik qayta hisoblanadi. Xuddi computed kabi
Xotira (memory) bilan store ning aloqasi:
Pinia store — bu shunchaki JavaScript obyekti, brauzer xotirasida (RAM) saqlanadi.
pinia - global ombor . options API va Composition API da strukturada yoziladi
state, getter, actiondan iborat . getter -computed kabi ishlaydi . state options APIda this , Composition API dan ref/reactive bilan ishlatiladi