Pinia dla Vue: defineStore i storeToRefs
Proszę definiować store Pinia za pomocą defineStore, uzyskiwać do niego dostęp w komponentach oraz używać storeToRefs, aby zachować reaktywność podczas destrukturyzacji stanu.
Pinia dla Vue: defineStore i storeToRefs to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest Pinia?
Pinia to oficjalna biblioteka do zarządzania stanem w Vue 3. Zastępuje Vuex prostszym, zapewniającym bezpieczeństwo typów interfejsem z integracją z DevTools, przypominającym Composition API.
Instalowanie Pinia
Należy zainstalować i zarejestrować wtyczkę Pinia w aplikacji Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — styl Composition API
defineStore tworzy store. Styl Composition API używa bezpośrednio ref, computed i funkcji — tak jak funkcja composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — styl Options API
Styl Options odzwierciedla Options API Vue: state() dla danych reaktywnych, gettery (takie jak computed) i akcje (takie jak metody).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Używanie store w komponencie
Należy wywołać hook store wewnątrz setup(). Store jest reaktywnym obiektem — można bezpośrednio odczytywać stan i wywoływać akcje.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — bezpieczna destrukturyzacja
Bezpośrednia destrukturyzacja store powoduje utratę reaktywności stanu i getterów (stają się one zwykłymi wartościami). Należy użyć storeToRefs(), aby przeprowadzić reaktywną destrukturyzację.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — aktualizacje zbiorcze
store.$patch() stosuje wiele zmian stanu jako jedną operację. Jest przydatne do grupowania powiązanych aktualizacji.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — obserwowanie zmian store
store.$subscribe(callback) reaguje na każdą mutację store, podobnie jak watch Vue, ale dla całego store.
Wtyczki Pinia
Wtyczki Pinia rozszerzają każdy store. Typowe zastosowania to zapisywanie stanu w localStorage, dodawanie rejestrowania debugowania lub wstrzykiwanie usług.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia integruje się z Vue DevTools. Można sprawdzać stan store'a, zobaczyć, które akcje zostały wywołane, oraz podróżować w czasie między migawkami stanu.
Wiele store'ów
Należy utworzyć jeden store dla każdej domeny (useAuthStore, useCartStore, useNotificationStore). Store'y mogą importować i używać siebie nawzajem. Płaska struktura Pinia (bez zagnieżdżonych modułów) upraszcza to zadanie.
Szybkie sprawdzenie
Dlaczego podczas destrukturyzacji store'a Pinia należy używać storeToRefs()?
Podsumowanie: Pinia
defineStore tworzy store'y. Można używać stylu Composition API lub Options API. Dostęp uzyskuje się za pomocą hooka useXxxStore(). Do reaktywnej destrukturyzacji należy używać storeToRefs(). $patch() służy do grupowania aktualizacji. Pluginy umożliwiają utrwalanie stanu i dodawanie innych rozszerzeń. Integracja z DevTools. Jeden store na domenę — bez zagnieżdżonych modułów w stylu Vuex.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Pinia dla Vue: defineStore i storeToRefs” jest bezpłatna?
Tak — pełny tekst „Pinia dla Vue: defineStore i storeToRefs” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pinia dla Vue: defineStore i storeToRefs”?
Proszę definiować store Pinia za pomocą defineStore, uzyskiwać do niego dostęp w komponentach oraz używać storeToRefs, aby zachować reaktywność podczas destrukturyzacji stanu. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Pinia dla Vue: defineStore i storeToRefs”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Redux Toolkit: createSlice i configureStore
- Zustand do lekkiego zarządzania stanem React
- Pinia dla Vue: defineStore i storeToRefs
- Kiedy używać stanu globalnego, a kiedy lokalnego