Pinia nima uchun kerak va store qanday tuzilgan?

Savol

Global holat boshqaruvi nima uchun kerak, Pinia'da store qanday tuzilgan va bu Vuex'dan nimasi bilan farq qiladi?

Qisqa javob

Global holat boshqaruvi ma'lumotlar ko'plab bog'liq bo'lmagan komponentlarda ishlatilganda va ularni props/emits orqali bir necha ichma-ichlik darajasi bo'ylab uzatish ("prop drilling") noqulay bo'lib qolganda kerak bo'ladi. Pinia — Vue 3 uchun rasmiy holat kutubxonasi, undagi store state (ma'lumotlar), getters (computedning analogi bo'lgan hosila qiymatlar) va actions (state'ni o'zgartirish uchun asinxron metodlarni ham o'z ichiga olgan metodlar)dan iborat. Vuex bilan solishtirganda Pinia soddaroq, mutatsiyalar va nomlar maydoniga ega modullarni talab qilmaydi, TypeScript'ni "qutidan" to'liq qo'llab-quvvatlaydi.

Batafsil javob

Store nima uchun kerak. Daraxtda bir-biridan uzoq turgan ikkita komponent bir xil ma'lumotlarni o'qishi va o'zgartirishi kerak bo'lganda (xarid savati, avtorizatsiyadan o'tgan foydalanuvchi ma'lumotlari, bezak mavzusi), buni props zanjiri orqali pastga va events orqali yuqoriga uzatish og'irlashib qoladi. Store — yagona haqiqat manbai (single source of truth), komponentlar daraxtidan tashqarida joylashgan reaktiv obyekt bo'lib, unga istalgan joydan to'g'ridan-to'g'ri murojaat qilish mumkin.

Pinia'da store strukturasi (defineStore orqali Composition-uslub sintaksis):

• state — boshlang'ich ma'lumotlarga ega obyektni qaytaruvchi funksiya (komponentdagi data()ning analogi). Qaytarilgan qiymatlar avtomatik ravishda reaktiv bo'lib qoladi.
• getters — state'dan hosila, keshlanuvchi qiymatlar, kontseptual jihatdan computedga ekvivalent. thisga murojaat qilishi mumkin (options-sintaksisda) yoki stateni parametr sifatida olishi mumkin.
• actions — state'ni o'zgartirish uchun metodlar, jumladan asinxron logika (API so'rovlari). Pinia'da, Vuex'dan farqli o'laroq, mutations va actions'ga bo'linish yo'q — state'ni to'g'ridan-to'g'ri actions ichida o'zgartirish mumkin.

Pinia shuningdek Setup Store sintaksisini ham qo'llab-quvvatlaydi — store oddiy composition-funksiya sifatida yoziladi: ref statega, computed — gettersga, oddiy funksiyalar — actionsga aylanadi. Bu Composition API'dagi qolgan kod bilan maksimal moslashuvchanlik va bir xillikni ta'minlaydi.

Vuex'dan farqlari:

Misol

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] // [{ id, price, quantity }]
  }),
  getters: {
    totalPrice: (state) =>
      state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    itemCount: (state) => state.items.length
  },
  actions: {
    addItem(product) {
      const existing = this.items.find((i) => i.id === product.id)
      if (existing) {
        existing.quantity++
      } else {
        this.items.push({ ...product, quantity: 1 })
      }
    },
    async checkout() {
      await fetch('/api/checkout', {
        method: 'POST',
        body: JSON.stringify(this.items)
      })
      this.items = []
    }
  }
})

<!-- CartSummary.vue -->
<script setup>
import { useCartStore } from '@/stores/cart'

const cart = useCartStore()
</script>

<template>
  <p>Savatdagi tovarlar: {{ cart.itemCount }}</p>
  <p>Jami: {{ cart.totalPrice }} so'm</p>
  <button @click="cart.checkout()">Buyurtma berish</button>
</template>

Qo'shimcha savollar

• Pinia'da Setup Store Options Store'dan nimasi bilan farq qiladi va qachon qaysi biri tanlanadi?
• Store holatini qayta yuklashlar orasida saqlanadigan (persistent) qilish uchun (localStorage'ga saqlash) nima qilish kerak?
• Nega Vuex state'ni o'zgartirish uchun mutations talab qilgan, Pinia esa talab qilmaydi?