Storejen koostaminen ja storejen välinen käyttö
Yhden storen käyttäminen toisessa, storejen koostamismallit ja kehäriippuvuuksien välttäminen
Storejen koostaminen ja storejen välinen käyttö on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Storet voivat käyttää toisia storeja
Todellisissa sovelluksissa on useita storeja, jotka tarvitsevat toistensa tietoja. Ostoskoristore tarvitsee ehkä auth-storen tietääkseen nykyisen käyttäjän. Pinia tekee storejen välisestä käytöstä suoraviivaista.
Storen kutsuminen actionin sisällä
Kutsukaa toista store-composablea actionin sisällä. Koska actionit suoritetaan Pinian aktivoinnin jälkeen, tämä on turvallista.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Setup storen syntaksi
Options-objektin lisäksi defineStore hyväksyy setup-funktion. Se muistuttaa komponentin setup-funktiota: määrittelette refit ja computed-arvot ja palautatte ne.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})State ref-arvoina
Setup storessa jokaisesta palauttamastanne ref- tai reactive-arvosta tulee state. Käyttäkää ref-funktiota primitiiveille ja reactive-funktiota objekteille.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Getterit computed-arvoina
Palautettu computed-arvo toimii getterinä. Se on välimuistissa ja reaktiivinen aivan kuten option storen getterit.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Actionit funktioina
Palautettu funktio on action. Se voi lukea ja kirjoittaa refejä suoraan .value-ominaisuuden avulla.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Refien ja computed-arvojen palauttaminen
Setup storejen tärkein sääntö on: palauttakaa kaikki, minkä haluatte tarjota käyttöön. Kaikki palauttamatta jätetty pysyy storen yksityisenä.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Storejen välinen käyttö setup storessa
Setup storessa voitte kutsua toista storea ylätasolla ja käyttää sitä computed-arvoissa tai actioneissa.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Ympyräriippuvuuksien välttäminen
Jos store A tuo store B:n käyttöön ja B tuo A:n käyttöön, seurauksena voi olla ympyräriippuvuus. Välttäkää toisen storen kutsumista moduulin ylätasolla. Kutsukaa sitä sen sijaan actionin tai getterin sisällä siellä, missä sitä tarvitaan.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Miksi viivästetyt kutsut auttavat
Kun kutsutte store-composablea funktion sisällä, ratkaisua lykätään suoritushetkeen, jolloin kaikki moduulit ovat jo latautuneet. Näin katkeaa moduulin arviointivaiheessa kaatumisen aiheuttava tuontisykli.
Option store ja setup store
Molemmat tyylit ovat ominaisuuksiltaan yhtä tehokkaita. Valitkaa option store, kun haluatte tutun ja deklaratiivisen rakenteen. Valitkaa setup store, kun tarvitsette Composition API:n täyden joustavuuden, kuten tarkkailijat tai composablet storen sisällä.
Pikatesti
Testatkaa, miten hyvin ymmärrätte storejen koostamisen.
Kertaus
Opitte koostamaan storeja:
- Kutsukaa toista store-composablea actionin sisällä, jotta voitte käyttää toista storea.
- Setup-storeissa käytetään funktiota: refit muodostavat tilan, computed-arvot ovat gettereitä ja funktiot actioneita.
- Palauttakaa kaikki, jotka haluatte tuoda saataville.
- Kutsukaa storeja laiskasti funktioiden sisällä pyöreiden riippuvuuksien välttämiseksi.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Storejen koostaminen ja storejen välinen käyttö” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Storejen koostaminen ja storejen välinen käyttö”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Storejen koostaminen ja storejen välinen käyttö”?
Yhden storen käyttäminen toisessa, storejen koostamismallit ja kehäriippuvuuksien välttäminen Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Storejen koostaminen ja storejen välinen käyttö”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Pinia vs Vuex: miksi vaihtaa
- defineStore: tila, getterit ja actionit
- Storejen koostaminen ja storejen välinen käyttö
- Pinian persistointi ja devtools