Frontend Academy · Lektion

Pinia för Vue: defineStore och storeToRefs

Definiera en Pinia-store med defineStore, använd den i komponenter och använd storeToRefs för att bevara reaktiviteten när state destruktureras.

Lektion 3 av 413 steg

Pinia för Vue: defineStore och storeToRefs är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är Pinia?

Pinia är det officiella biblioteket för statehantering i Vue 3. Det ersätter Vuex med ett enklare, typsäkert och DevTools-integrerat API som känns som Composition API.

Installera Pinia

Installera och registrera 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 skapar en store. Stilen med Composition API använder ref, computed och funktioner direkt – precis 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 speglar Vues Options API: state() för reaktiv data, getters (som computed) och 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);
    }
  }
});

Använda en store i en komponent

Anropa store-hooken inuti setup(). Storen är ett reaktivt objekt – du kan läsa state och anropa actions direkt.

<script setup>
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs – säker destrukturering

Direkt destrukturering av en store gör att state och getters förlorar sin reaktivitet (de blir vanliga värden). Använd storeToRefs() för att destrukturera 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 – batchuppdateringar

store.$patch() tillämpar flera state-ändringar som en enda operation. Det är användbart för att gruppera relaterade uppdateringar.

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 – bevaka ändringar i storen

store.$subscribe(callback) reagerar på alla mutationer i storen, ungefär som Vues watch men för hela storen.

Pinia-plugins

Pinia-plugins utökar varje store. Vanliga användningsområden är att spara state i localStorage, lägga till felsökningsloggning eller injicera tjänster.

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Pinia DevTools

Pinia integreras med Vue DevTools. Du kan inspektera state i en store, se vilka actions som anropades och färdas fram och tillbaka mellan ögonblicksbilder av state.

Flera stores

Skapa en store per domän (useAuthStore, useCartStore, useNotificationStore). Stores kan importera och använda varandra. Pinia har en platt struktur (inga nästlade moduler), vilket gör detta enkelt.

Snabbkontroll

Varför bör du använda storeToRefs() när du destrukturerar en Pinia-store?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Pinia

defineStore skapar stores. Med Composition API- eller Options API-stil. Åtkomst med hooken useXxxStore(). Använd storeToRefs() för reaktiv destrukturering. $patch() för samlade uppdateringar. Plugins för persistens och andra utökningar. Integration med DevTools. En store per domän — inga nästlade moduler av Vuex-typ.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Pinia för Vue: defineStore och storeToRefs” gratis?

Ja – hela texten till ”Pinia för Vue: defineStore och storeToRefs” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Pinia för Vue: defineStore och storeToRefs”?

Definiera en Pinia-store med defineStore, använd den i komponenter och använd storeToRefs för att bevara reaktiviteten när state destruktureras. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Pinia för Vue: defineStore och storeToRefs”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Redux Toolkit: createSlice och configureStore
Zustand för lättviktig React-state
Pinia för Vue: defineStore och storeToRefs
När ska global respektive lokal state användas

← Tillbaka till Frontend Academy