Si funksionon menaxhimi i gjendjes me Pinia?

Question

Accepted Answer

**Pinia** është biblioteka zyrtare e Vue për menaxhimin e gjendjes (pasardhësja e Vuex) — një **store** të centralizuar për gjendjen që duhet të ndahet në shumë komponentë, me një API të thjeshtë dhe të sigurt në lloj, ndërtuar në Composition API. ## Përcaktimi i një store ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getters (derived state) = computed const double = computed(() => count.value * 2); // actions (methods that mutate state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` Kjo "setup store" duket saktësisht si një composable — `ref` për gjendjen, `computed` për getters, funksionet për aksione — gjë e cila e bën intuitiven nëse e njihni Composition API. ## Përdorimi i store në komponente ```vue ``` **E rëndësishme:** përdorni `storeToRefs` kur destrakturoni **gjendjen/getters** — destrakturimi i thjeshtë do të thyente reaktivitetin (e njëjta paralajmërim reaktive si në `reactive`). Aksionet nuk e kanë nevojë për të. ## Pse Pinia mbi Vuex ```text ✓ No mutations boilerplate — actions can mutate state directly ✓ Excellent TypeScript inference (Vuex was painful to type) ✓ Modular by design — many small stores, no nested-module complexity ✓ Composition-API-native, tiny API, devtools support ``` ## Kur të përdorim një store në vend të props/composables ```text props/emits → parent ↔ child provide/inject → share within a subtree Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings) accessed by many unrelated components ``` ## Pse ka rëndësi Pinia është zgjidhja standarde për **gjendjen globale, të ndarë** në aplikacionet Vue — përdorues/autentifikimi, karricat e nákupës, cilësimet e aplikacionit, të dhënat e cache — çdo gjë që shumë komponente të largëta duhet të lexojnë dhe të përditësojnë në mënyrë konsistente. API-ja e saj në stilin composable, mbështetja e TypeScript-it në klasën e parë, dhe mungesa e stereotipeve të Vuex-it e bëjnë atë zgjedhjen e rekomanduar. Dija se kur të përpiqemi për të (kundër props/inject) kur gjendja është vërtet globale, dhe përdorimi i `storeToRefs` për të ruajtur reaktivitetin në destrakturimin, është bërthama e përdorimit të tij në mënyrë të saktë.