Pinia for Vue: defineStore og storeToRefs
Definer en Pinia-store med defineStore, bruk den i komponenter, og bruk storeToRefs for å bevare reaktiviteten ved destrukturering av state.
Pinia for Vue: defineStore og storeToRefs er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva er Pinia?
Pinia er det offisielle biblioteket for tilstandsbehandling i Vue 3. Det erstatter Vuex med et enklere, typesikkert og DevTools-integrert API som føles som Composition API.
Installere Pinia
Installer og registrer Pinia-pluginen med Vue-appen.
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 – stil med Composition API
defineStore oppretter en store. Stilen med Composition API bruker ref, computed og funksjoner direkte – akkurat som en 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 – Options-stil
Options-stilen gjenspeiler Vues Options API: state() for reaktive data, getters (som computed) og actions (som methods).
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);
}
}
});Bruke en store i en komponent
Kall store-hooken inne i setup(). Store er et reaktivt objekt – De kan lese tilstand og kalle actions direkte.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs – trygg destrukturering
Direkte destrukturering av en store fjerner reaktiviteten for tilstand og getters (de blir vanlige verdier). Bruk storeToRefs() for å destrukturere reaktivt.
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 – samle oppdateringer
store.$patch() bruker flere tilstandsendringer som én operasjon. Det er nyttig for å samle relaterte oppdateringer.
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 – overvåke endringer i store
store.$subscribe(callback) reagerer på enhver mutering av store, omtrent som Vues watch, men for hele store.
Pinia-plugins
Pinia-plugins utvider alle store. Vanlige bruksområder er å lagre tilstand i localStorage, legge til feilsøkingslogging eller injisere tjenester.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia integreres med Vue DevTools. Du kan inspisere tilstanden i store-et, se hvilke handlinger som ble kalt, og gå frem og tilbake mellom øyeblikksbilder av tilstanden.
Flere store-er
Opprett ett store per domene (useAuthStore, useCartStore, useNotificationStore). Store-er kan importere og bruke hverandre. Pinia sin flate struktur (uten nestede moduler) gjør dette enkelt.
Rask sjekk
Hvorfor bør du bruke storeToRefs() når du destrukturerer et Pinia-store?
Oppsummering: Pinia
defineStore oppretter store-er. Stil med Composition API eller Options API. Få tilgang med useXxxStore()-hooken. Bruk storeToRefs() for reaktiv destrukturering. Bruk $patch() for grupperte oppdateringer. Bruk plugins for persistens og andre utvidelser. Integrasjon med DevTools. Ett store per domene – ingen nestede moduler i Vuex-stil.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Pinia for Vue: defineStore og storeToRefs» gratis?
Ja – hele teksten i «Pinia for Vue: defineStore og storeToRefs» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Pinia for Vue: defineStore og storeToRefs»?
Definer en Pinia-store med defineStore, bruk den i komponenter, og bruk storeToRefs for å bevare reaktiviteten ved destrukturering av state. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Pinia for Vue: defineStore og storeToRefs»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Redux Toolkit: createSlice og configureStore
- Zustand for lettvekts React-state
- Pinia for Vue: defineStore og storeToRefs
- Når skal global eller lokal state brukes