Pinia til Vue: defineStore og storeToRefs
Definér et Pinia-store med defineStore, tilgå det i komponenter, og brug storeToRefs for at bevare reaktivitet ved destructuring af state.
Pinia til Vue: defineStore og storeToRefs er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er Pinia?
Pinia er det officielle bibliotek til tilstandshåndtering i Vue 3. Det erstatter Vuex med en enklere, typesikker og DevTools-integreret API, der føles som Composition API.
Installation af Pinia
Installér og registrér Pinia-pluginet 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 — Composition API-stil
defineStore opretter en store. Composition API-stilen bruger ref, computed og funktioner direkte – ligesom 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 afspejler Vues Options API: state() til reaktive data, getters (som computed) og actions (som metoder).
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);
}
}
});Brug af en store i en komponent
Kald store-hooken inde i setup(). Storet er et reaktivt objekt – du kan læse tilstanden og kalde 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 — Sikker destrukturering
Direkte destrukturering af en store fjerner reaktiviteten fra tilstand og getters (de bliver almindelige værdier). Brug storeToRefs() til at 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 — Samlede opdateringer
store.$patch() anvender flere ændringer af tilstanden som én operation. Det er nyttigt til at samle relaterede opdateringer.
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åg ændringer i storet
store.$subscribe(callback) reagerer på enhver mutation i storet, ligesom Vues watch, men for hele storet.
Pinia-plugins
Pinia-plugins udvider alle stores. Typiske anvendelser er at gemme tilstanden i localStorage, tilføje logning til fejlfinding eller indsætte services.
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 inspicere tilstanden i stores, se hvilke handlinger der blev kaldt, og bevæge dig frem og tilbage i tiden mellem snapshots af tilstanden.
Flere stores
Opret én store pr. domæne (useAuthStore, useCartStore, useNotificationStore). Stores kan importere og bruge hinanden. Pinia's flade struktur (ingen indlejrede moduler) gør dette enkelt.
Hurtigt tjek
Hvorfor bør du bruge storeToRefs(), når du destrukturerer en Pinia-store?
Opsummering: Pinia
defineStore opretter stores. Composition API- eller Options API-stil. Få adgang med useXxxStore()-hjælpefunktionen. Brug storeToRefs() til reaktiv destrukturering. Brug $patch() til samlede opdateringer. Plugins til vedvarende lagring og andre udvidelser. Integration med DevTools. Én store pr. domæne — ingen indlejrede moduler som i Vuex.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Pinia til Vue: defineStore og storeToRefs” gratis?
Ja — hele teksten til “Pinia til Vue: defineStore og storeToRefs” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Pinia til Vue: defineStore og storeToRefs”?
Definér et Pinia-store med defineStore, tilgå det i komponenter, og brug storeToRefs for at bevare reaktivitet ved destructuring af state. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Pinia til Vue: defineStore og storeToRefs”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Redux Toolkit: createSlice og configureStore
- Zustand til letvægts-React-state
- Pinia til Vue: defineStore og storeToRefs
- Hvornår skal global eller lokal state bruges