Vue Academy · Lekcja

Przykład wtyczki powiadomień i toastów

Budowanie wtyczki toastera: reaktywna kolejka, logika instalacji oraz programowe API przez provide/inject.

Lekcja 3 z 413 kroki

Przykład wtyczki powiadomień i toastów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Cel: wtyczka powiadomień toastowych

Zbudujemy wtyczkę powiadomień toastowych. Utrzymuje ona reaktywną kolejkę komunikatów, udostępnia API notify i globalnie renderuje toasty. Każdy komponent może wywołać toast za pomocą inject lub composable.

Reaktywna kolejka

Podstawowy stan to reaktywny ref przechowujący tablicę obiektów toastów. Po dodaniu lub usunięciu elementów każdy komponent renderujący kolejkę aktualizuje się automatycznie.

import { ref } from 'vue'

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

Unikalne identyfikatory z użyciem licznika

Każdy toast potrzebuje unikalnego id do używania jako klucza i do usuwania. Należy użyć inkrementującego licznika, a nie Date.now() — dwa toasty wywołane w tej samej milisekundzie miałyby identyczny znacznik czasu.

let counter = 0

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

Funkcja notify

notify jest publicznym API. Dodaje nowy toast ze świeżym identyfikatorem i planuje jego usunięcie po upływie określonego czasu.

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

Usuwanie toasta

dismiss usuwa toast na podstawie identyfikatora, odfiltrowując go z reaktywnej tablicy. Ponowne przypisanie toasts.value zachowuje reaktywność.

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

Grupowanie w usługę

Stan i funkcje należy połączyć w jeden obiekt usługi. To właśnie ten obiekt wtyczka udostępnia aplikacji.

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

Metoda install wtyczki

Funkcja install wtyczki udostępnia usługę za pomocą app.provide, dzięki czemu każdy komponent może ją wstrzyknąć. Dla bezpieczeństwa eksportujemy klucz Symbol.

export const toastKey = Symbol('toast')

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

Rejestrowanie kontenera toastów

Wtyczka może również zarejestrować globalny komponent ToastContainer, który renderuje kolejkę, dzięki czemu użytkownik aplikacji musi tylko raz umieścić go w pobliżu głównego komponentu aplikacji.

import ToastContainer from './ToastContainer.vue'

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

Szablon kontenera

Kontener odczytuje wstrzykniętą kolejkę i renderuje każdy toast, udostępniając obsługę kliknięcia usuwającą toast na podstawie unikalnego identyfikatora.

<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>

Wygodny composable

Należy opakować inject w composable useToast, aby komponenty otrzymały przejrzyste API i pomocny błąd w przypadku braku zainstalowanej wtyczki.

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
}

Korzystanie z wtyczki w komponencie

Na koniec każdy komponent wywołuje powiadomienia za pomocą composable. Należy zarejestrować app.use(toastPlugin) i raz umieścić <ToastContainer /> w pobliżu korzenia aplikacji.

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

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

Szybkie sprawdzenie

Proszę sprawdzić zrozumienie projektu wtyczki toastów.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Zbudowali Państwo wtyczkę toastów:

Reaktywna tablica ref przechowuje kolejkę toastów
Inkrementujący licznik zapewnia unikalne identyfikatory bez kolizji
notify jest publicznym API, a dismiss usuwa element na podstawie identyfikatora
Funkcja install udostępnia usługę za pomocą app.provide
Composable useToast opakowuje inject, zapewniając wygodny sposób użycia

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Przykład wtyczki powiadomień i toastów” jest bezpłatna?

Tak — pełny tekst „Przykład wtyczki powiadomień i toastów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przykład wtyczki powiadomień i toastów”?

Budowanie wtyczki toastera: reaktywna kolejka, logika instalacji oraz programowe API przez provide/inject. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Przykład wtyczki powiadomień i toastów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Architektura wtyczek i app.use()
Właściwości globalne oraz provide/inject we wtyczkach
Przykład wtyczki powiadomień i toastów
Publikowanie i typowanie wtyczek Vue

← Powrót do Vue Academy