Vue da state management (Vuex)

Vuex - state management pattern, ya'ni shtat boshqaruv modeli deyiladi. Oxoo, zo'rku. Lekin bu nima degani?

Tasavvur qiling, yuzlab komponentalar va sahifalarga ega Vue.js loyiha ustida ishlayapsiz. Shu loyiha uchun kerak bo'ladigan ma'lumotlarni bitta markazlashgan faylda saqlash, loyiha ishini osonlashtiradi, to'g'rimi?)

Har bir komponent va sahifa o'ziga kerak bo'lgan ma'lumotlarni olish uchun markaziy shtatga so'rov yuboradi va ularni qabul qiladi. Ma'lumotlardan foydalanib bo'lgach, ularni yana shtatga(state) qaytaradi. Shtat so'zi keyingi o'rinlarda state deb nomlanadi.

Ma'lumotlar state ichida yagona object ko'rinishida saqlanadi:

Lekin komponentalar va sahifalar state dagi ma'lumotlarga qanday qilib murojaat qiladi? Bu savolga Getters deb javob bergan bo'lardim. Getterlar - state dagi ma'lumotlarni tegishli murojaatlarga qaytaruvchi oddiy javascript callback funksiyalaridir:

E'tibor bergan bo'lsangiz getter funksiyasi katta harf bilan yozilgan. Bu tartibda yozish majburiy emas, lekin bu usul vuex da coding convention hisoblanadi. Ushbu usuldan foydalanish ko'pchilik dasturchilar tomonidan tavsiya qilinadi.

Endi esa, state dagi name o'zgaruvchisini olish uchun maxsus getter funksiyasiga murojaat qilishimiz kerak, bu siz o'ylaganingizdan ham oson jarayon.

Biz shtatdan ma'lumotlarni qanday olishni o'rgandik. Endi keling, ma'lumotlarni qanday o'zgartirish haqida biroz to'xtalamiz. Hmm... Ma'lumotlarni olish getters orqali bajarilsa, o'zgartirish setters lar bilan amalga oshiriladimi? Qisman ha. Lekin Vuex da siz o'ylagan setters lar boshqacha ataladi. Biz ularni Mutations deb ataymiz.

Jin ursin, payload nima?) Hayolingizga shu narsa kelgan bo'lsa ajablanmaymiz. Payload bu biz state kiritmoqchi bo'lgan yangi ma'lumot. Xo'p, payload ni qanday joylashtiramiz? Oson.

Biz mutation larga tepada yozilgan misol kabi murojaat qilamiz. Ko'rib turganingizdek, verguldan keyin payload ga berilishi kerak bo'lgan tegishli ma'lumot yoziladi.

Tasavvur qiling, serverimizda foydalanuvchilarning ismlari yozilgan ro'yxat bor. Serverning esa shu ro'yxatni qaytaruvchi maxsus havolasi bor. Bu holatda biz Axios qo'shimcha paketidan foydalanamiz. Bu paket bizga serverlarga murojaat qilib, tegishli ma'lumotlarni olish va jo'natish kabi operatsiyalarni bajarishga yordam beradi.

Endi esa, data ichida keladigan massivni biz mutatsiya orqali Vuex state ga kiritishimiz mumkin. Hammasi oddiy, shunaqami? Aslida judayam oddiy emas. Chunki mutatsiyalar sinxron ravishda ishlaydi. API dan keladigan asinxron funksiyonallikni qo'llab quvvatlamaydi.

Xo'p, bu holatda biz nima qilamiz? Actions bizga yordam beradi.

Actions mutatsiyalarga o'xshash, biroq ular mutatsiyalarga murojaat qila olishi bilan farq qiladi. Judayam chalkashdingiz a? Keling kodga o'tamiz.

Bizda SET_NAME nomli action funksiyamiz bor. Bu funksiya o'zida argument sifatida context va payload ni qabul qiladi. Context orqali biz mutatsiyalarga murojaat qilishimiz, action yordamida esa yangi ma'lumotni qo'shishimiz mumkin.

Biz komponenta ichida mutatsiya, getter larga murojaat qilganimiz kabi, action larga ham murojaat qilib, tegishli operatsiyalarni bajara olamiz.

Action payload ga berilgan qiymat bilan birga mutatsiyani ishga tushiradi.

Mutatsiyalarni komponentalarda to'g'ridan to'g'ri yangi qiymatlar bilan ishga tushirish imkoni bo'lsa, actions nimaga kerak deb o'ylashingiz mumkin.

Tepada yozilganidek, mutatsiyalar asinxron funksiyonallikni qo'llab quvvatlamagani uchun actions dan foydalaniladi.

Biz hozirgacha bajargan umumiy jarayonning to'liq ko'rinishi:

Hozircha shular. Kuzatishda davom eting!

@fozilovkamron - maqolani do'stlaringizga ulashing.