Komponowanie store i dostęp między store
Używanie jednego store wewnątrz innego, wzorce komponowania store oraz unikanie zależności cyklicznych.
Komponowanie store i dostęp między store to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Store'y mogą korzystać z innych store'ów
Rzeczywiste aplikacje mają wiele store'ów, które muszą ze sobą współpracować. Store koszyka może potrzebować store'a uwierzytelniania, aby znać bieżącego użytkownika. Pinia upraszcza dostęp między store'ami.
Wywoływanie store'a wewnątrz akcji
Wewnątrz akcji wystarczy wywołać composable drugiego store'a. Ponieważ akcje są uruchamiane po aktywowaniu Pinia, jest to bezpieczne.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Składnia setup store'a
Oprócz obiektu opcji defineStore przyjmuje również funkcję setup. Wygląda ona podobnie jak setup komponentu: należy zadeklarować refy i wartości computed, a następnie je zwrócić.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Stan jako refy
W setup store każdy zwrócony element ref lub reactive staje się stanem. Należy używać ref dla prymitywów, a reactive dla obiektów.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Gettery jako computed
Zwrócona wartość computed działa jako getter. Jest buforowana i reaktywna, podobnie jak gettery w option store.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Akcje jako funkcje
Zwrócona funkcja jest akcją. Może bezpośrednio odczytywać i zapisywać refy za pomocą .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Zwracanie refów i computed
Najważniejsza zasada setup store'ów brzmi: należy zwrócić wszystko, co ma być udostępnione. Wszystko, czego się nie zwróci, pozostaje prywatne dla store'a.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Dostęp między store'ami w setup store
W setup store można wywołać inny store na najwyższym poziomie, a następnie używać go w wartościach computed lub akcjach.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Unikanie zależności cyklicznych
Jeśli store A importuje store B, a store B importuje store A, może wystąpić zależność cykliczna. Należy unikać wywoływania drugiego store'a na najwyższym poziomie modułu; zamiast tego trzeba wywoływać go wewnątrz akcji lub gettera, w miejscu, w którym jest potrzebny.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Dlaczego opóźnione wywołania pomagają
Wywołanie composable store'a wewnątrz funkcji odracza rozwiązanie zależności do czasu działania programu, gdy wszystkie moduły zostały już załadowane. W ten sposób przerywa cykl importów, który powoduje awarię podczas ewaluacji modułu.
Option store a setup store
Oba style mają takie same możliwości. Należy wybrać option store, jeśli potrzebna jest znajoma, deklaratywna struktura, albo setup store, jeśli potrzebna jest pełna elastyczność Composition API, na przykład watchery lub composable'e wewnątrz store'a.
Szybki test
Proszę sprawdzić zrozumienie łączenia store’ów.
Podsumowanie
Nauczyli się Państwo łączyć store’y:
- Należy wywołać composable innego store’a wewnątrz akcji, aby uzyskać dostęp między store’ami.
- Store’y typu setup używają funkcji: refy są stanem, computed są getterami, a funkcje są akcjami.
- Należy zwrócić wszystko, co ma być dostępne z zewnątrz.
- Store’y należy wywoływać leniwie wewnątrz funkcji, aby uniknąć zależności cyklicznych.
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
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Komponowanie store i dostęp między store” jest bezpłatna?
Tak — pełny tekst „Komponowanie store i dostęp między store” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Komponowanie store i dostęp między store”?
Używanie jednego store wewnątrz innego, wzorce komponowania store oraz unikanie zależności cyklicznych. Ćwiczysz Vue 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ąć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue 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 „Komponowanie store i dostęp między store”?
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 Vue Academy?
Tak. Każda lekcja Vue 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
- Pinia czy Vuex: dlaczego warto przejść
- defineStore: stan, gettery i akcje
- Komponowanie store i dostęp między store
- Trwałość danych Pinia i devtools