0Pricing
Vue Academy · Lektion

defineStore: State, Getter und Actions

Options-Store vs. Setup-Store, State als Funktion, berechnete Getter und asynchrone Actions

defineStore: State, Getter und Actions ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Die drei Säulen eines Stores

Ein Options-Store besteht aus drei Teilen: State (die Daten), Gettern (abgeleitete Werte) und Actions (Methoden, die den State ändern). Sie definieren alle drei innerhalb von defineStore.

Einen Store definieren

defineStore erhält einen eindeutigen id-String und ein Optionsobjekt. Es gibt ein Composable zurück, das konventionell useXxxStore genannt wird.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

State ist eine Funktion

Die Option state muss eine Funktion sein, die ein Objekt zurückgibt. Dadurch erhält jede Store-Instanz einen neuen State, genau wie bei data() in Komponenten.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

State lesen

Rufen Sie das Store-Composable innerhalb von setup auf, um eine Instanz zu erhalten, und lesen Sie anschließend die State-Eigenschaften direkt aus. Sie sind reaktiv.

const counter = useCounterStore()
console.log(counter.count) // 0

Getter sind berechnete Werte

getters ähneln computed-Eigenschaften. Jeder Getter erhält den state als erstes Argument und gibt einen abgeleiteten Wert zurück. Die Werte werden zwischengespeichert.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Einen Getter verwenden

Greifen Sie wie auf eine Eigenschaft auf einen Getter zu – ohne Klammern. Pinia berechnet ihn nur neu, wenn sich seine Abhängigkeiten ändern.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Getter, die auf andere Getter verweisen

Um einen anderen Getter zu verwenden, referenzieren Sie this statt des State-Parameters. Bei Verwendung von this dürfen Sie keine Arrow-Funktion verwenden.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Actions ändern den State

actions sind Methoden. Sie verwenden this, um den State direkt zu lesen und zu ändern. Kein Commit, kein Dispatch – rufen Sie einfach die Methode auf.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Asynchrone Actions

Actions können async sein. Hier ist der richtige Ort für API-Aufrufe: Rufen Sie Daten ab und weisen Sie das Ergebnis anschließend dem State zu.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Den Store in einer Komponente verwenden

Importieren Sie das Composable, rufen Sie es in <script setup> auf und verwenden Sie State, Getter und Actions im Template.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Mehrere Felder gleichzeitig aktualisieren

Um mehrere State-Felder auf einmal zu ändern, verwenden Sie $patch. Dadurch werden die Änderungen zu einem einzigen Devtools-Eintrag zusammengefasst.

counter.$patch({ count: 10, name: 'New' })

Kurze Überprüfung

Testen Sie Ihr Wissen über den Aufbau eines Options-Stores.

Zusammenfassung

Ein Options-Store besteht aus drei Teilen:

  • state: eine Funktion, die das Datenobjekt zurückgibt.
  • getters: zwischengespeicherte abgeleitete Werte, die den State erhalten (oder this verwenden).
  • actions: Methoden, die den State direkt über this ändern.

Verwenden Sie den Store, indem Sie sein Composable innerhalb von setup aufrufen.

Häufig gestellte Fragen

Ist die Lektion „defineStore: State, Getter und Actions“ kostenlos?

Ja — der vollständige Text von „defineStore: State, Getter und Actions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „defineStore: State, Getter und Actions“?

Options-Store vs. Setup-Store, State als Funktion, berechnete Getter und asynchrone Actions Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „defineStore: State, Getter und Actions“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Pinia vs. Vuex: Gründe für den Wechsel
  2. defineStore: State, Getter und Actions
  3. Stores kombinieren und storeübergreifend zugreifen
  4. Pinia-Persistenz und Devtools
← Zurück zu Vue Academy