0Pricing
Vue Academy · Lektion

Beispiel für ein Benachrichtigungs- und Toast-Plugin

Ein Toaster-Plugin erstellen: reaktive Warteschlange, Installationslogik und programmatische API mit provide/inject

Beispiel für ein Benachrichtigungs- und Toast-Plugin ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Ziel: Ein Toast-Plugin

Wir erstellen ein Plugin für Toast-Benachrichtigungen. Es verwaltet eine reaktive Nachrichtenwarteschlange, stellt eine notify-API bereit und rendert Toasts global. Jede Komponente kann über inject oder ein Composable einen Toast auslösen.

Die reaktive Warteschlange

Der zentrale Zustand ist ein reaktives ref, das ein Array von Toast-Objekten enthält. Wenn wir Elemente hinzufügen oder entfernen, wird jede Komponente, die die Warteschlange rendert, automatisch aktualisiert.

import { ref } from 'vue'

const toasts = ref([])
// each toast: { id, message, type }

Eindeutige IDs mit einem Zähler

Jeder Toast benötigt eine eindeutige id zur Identifikation und zum Entfernen. Verwenden Sie einen inkrementierenden Zähler, nicht Date.now() — zwei im selben Millisekundenintervall ausgelöste Toasts würden bei einem Zeitstempel kollidieren.

let counter = 0

function nextId() {
  // guaranteed unique even for rapid-fire toasts
  return ++counter
}

Die notify-Funktion

notify ist die öffentliche API. Sie fügt einen neuen Toast mit einer frischen ID hinzu und plant dessen Entfernung nach einer bestimmten Dauer.

function notify(message, type = 'info', duration = 3000) {
  const id = nextId()
  toasts.value.push({ id, message, type })
  setTimeout(() => dismiss(id), duration)
  return id
}

Einen Toast schließen

dismiss entfernt einen Toast anhand seiner ID, indem er ihn aus dem reaktiven Array herausfiltert. Durch die Neuzuweisung von toasts.value bleibt die Reaktivität erhalten.

function dismiss(id) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}

Zu einem Service bündeln

Bündeln Sie den Zustand und die Funktionen in einem Service-Objekt. Dieses Objekt stellt das Plugin für die App bereit.

const toastService = {
  toasts,      // reactive ref (read in the UI)
  notify,      // create a toast
  dismiss      // remove a toast
}

Die install-Methode des Plugins

Das Plugin stellt den Service über app.provide bereit, sodass jede Komponente ihn injizieren kann. Aus Sicherheitsgründen exportieren wir einen Symbol-Schlüssel.

export const toastKey = Symbol('toast')

export default {
  install(app) {
    app.provide(toastKey, toastService)
    app.config.globalProperties.$toast = toastService
  }
}

Den Toast-Container registrieren

Das Plugin kann außerdem eine globale ToastContainer-Komponente registrieren, die die Warteschlange rendert. Dadurch muss der Verwender sie nur einmal in der Nähe der App-Wurzel einfügen.

import ToastContainer from './ToastContainer.vue'

install(app) {
  app.provide(toastKey, toastService)
  app.component('ToastContainer', ToastContainer)
}

Die Vorlage des Containers

Der Container liest die injizierte Warteschlange aus und rendert jeden Toast. Dabei verwendet er einen Click-to-Dismiss-Handler, der über die eindeutige ID identifiziert wird.

<script setup>
import { inject } from 'vue'
import { toastKey } from './toast'
const { toasts, dismiss } = inject(toastKey)
</script>

<template>
  <div class="toasts">
    <div v-for="t in toasts" :key="t.id" :class="t.type"
         @click="dismiss(t.id)">
      {{ t.message }}
    </div>
  </div>
</template>

Ein praktisches Composable

Kapseln Sie den Inject-Aufruf in einem useToast-Composable, damit Komponenten eine übersichtliche API und eine hilfreiche Fehlermeldung erhalten, wenn das Plugin nicht installiert wurde.

import { inject } from 'vue'
import { toastKey } from './toast'

export function useToast() {
  const service = inject(toastKey)
  if (!service) throw new Error('Toast plugin not installed')
  return service
}

Verwendung in einer Komponente

Schließlich löst jede Komponente Benachrichtigungen über das Composable aus. Registrieren Sie app.use(toastPlugin) und platzieren Sie <ToastContainer /> einmal in der Nähe der Wurzel.

<script setup>
import { useToast } from './toast'
const { notify } = useToast()

function save() {
  notify('Saved successfully', 'success')
}
</script>

Kurzer Test

Testen Sie Ihr Verständnis des Designs eines Toast-Plugins.

Zusammenfassung

Sie haben ein Toast-Plugin erstellt:

  • Ein reaktives ref-Array enthält die Toast-Warteschlange
  • Ein inkrementierender Zähler erzeugt kollisionsfreie eindeutige IDs
  • notify ist die öffentliche API; dismiss entfernt anhand der ID
  • install stellt den Service über app.provide bereit
  • Ein useToast-Composable kapselt inject für eine komfortable Verwendung

Häufig gestellte Fragen

Ist die Lektion „Beispiel für ein Benachrichtigungs- und Toast-Plugin“ kostenlos?

Ja — der vollständige Text von „Beispiel für ein Benachrichtigungs- und Toast-Plugin“ 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 „Beispiel für ein Benachrichtigungs- und Toast-Plugin“?

Ein Toaster-Plugin erstellen: reaktive Warteschlange, Installationslogik und programmatische API mit provide/inject 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 3 von 4.

Wie lange dauert die Lektion „Beispiel für ein Benachrichtigungs- und Toast-Plugin“?

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. Plugin-Architektur und app.use()
  2. Globale Eigenschaften und provide/inject in Plugins
  3. Beispiel für ein Benachrichtigungs- und Toast-Plugin
  4. Vue-Plugins veröffentlichen und typisieren
← Zurück zu Vue Academy