0Pricing
Vue Academy · Lektion

useCounter: Ein einfaches Composable

count-Ref, Funktionen zum Erhöhen und Verringern, Zurücksetzen und Freigeben nur des Benötigten

useCounter: Ein einfaches Composable 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.

useCounter erstellen

Wir schreiben ein kleines, aber vollständiges Komposable: useCounter. Es verwaltet eine Zahl und stellt Methoden bereit, um sie zu ändern – ein perfektes erstes Komposable.

Einen Anfangswert akzeptieren

Geben Sie der Funktion einen Parameter initial mit einem Standardwert, damit Aufrufende den Zähler an einer beliebigen Stelle starten können.

function useCounter(initial = 0) {
  // ...
}

Die interne count-Ref

Erstellen Sie darin eine ref für den Zähler und initialisieren Sie sie mit dem Anfangswert. Das ist der reaktive Zustand, den das Komposable verwaltet.

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

Die increment-Funktion

Definieren Sie eine Funktion, die die Ref verändert. Da count reaktiv ist, werden alle Nutzenden automatisch aktualisiert.

function increment() {
  count.value++;
}

decrement und reset

Fügen Sie die ergänzenden Aktionen hinzu. reset verwendet das ursprüngliche initial, das in der Closure gespeichert wurde.

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

Die API zurückgeben

Geben Sie ein Objekt mit dem reaktiven Zustand und allen Methoden zurück. Das ist die öffentliche Schnittstelle des Komposables.

return { count, increment, decrement, reset };

Das vollständige Komposable

Zusammengesetzt ist das gesamte Komposable kompakt und in jeder Komponente wiederverwendbar.

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

In einer Komponente verwenden

Rufen Sie es in <script setup> auf und destrukturieren Sie das Ergebnis. Im Template können Sie count direkt verwenden (automatisch entpackt) und die Methoden binden.

const { count, increment, decrement, reset } = useCounter(10);

Im Template

Verbinden Sie die Methoden mit Schaltflächen. Jeder Klick verändert die gemeinsame Ref, und die Ansicht wird aktualisiert.

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

Unabhängige Instanzen

Jeder Aufruf von useCounter erstellt eine eigene count-Ref. Zwei Komponenten, die es aufrufen, erhalten separate, voneinander isolierte Zähler.

const a = useCounter();   // own count
const b = useCounter(100); // own count

Berechnete Zusatzwerte hinzufügen

Sie können das Komposable um abgeleiteten Zustand erweitern, etwa eine berechnete isZero-Eigenschaft, die zusammen mit den übrigen Werten zurückgegeben wird.

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

Kurze Überprüfung

Warum erhält jeder Aufruf von useCounter einen eigenen Zustand?

Zusammenfassung

Sie haben useCounter(initial) erstellt: eine interne count-Ref, die Funktionen increment/decrement/reset sowie ein zurückgegebenes Objekt, das den reaktiven Zustand und die Methoden bereitstellt. Jeder Aufruf erzeugt eine unabhängige Instanz.

Häufig gestellte Fragen

Ist die Lektion „useCounter: Ein einfaches Composable“ kostenlos?

Ja — der vollständige Text von „useCounter: Ein einfaches Composable“ 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 „useCounter: Ein einfaches Composable“?

count-Ref, Funktionen zum Erhöhen und Verringern, Zurücksetzen und Freigeben nur des Benötigten 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 „useCounter: Ein einfaches Composable“?

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. Was ein gutes Composable ausmacht
  2. useCounter: Ein einfaches Composable
  3. useFetch: Asynchrones Composable für Daten
  4. VueUse: Die Composable-Bibliothek
← Zurück zu Vue Academy