0Pricing
Vue Academy · Lezione

Esempio di plugin per notifiche e toast

Creazione di un plugin toaster: coda reattiva, logica di installazione, API programmatica tramite provide/inject.

Esempio di plugin per notifiche e toast è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Obiettivo: un plugin per i toast

Costruiremo un plugin per le notifiche toast. Il plugin mantiene una coda reattiva di messaggi, espone un'API notify e visualizza i toast a livello globale. Qualsiasi componente può attivare un toast tramite inject o un composable.

La coda reattiva

Lo stato principale è un ref reattivo che contiene un array di oggetti toast. Quando aggiungiamo o rimuoviamo elementi, ogni componente che visualizza la coda si aggiorna automaticamente.

import { ref } from 'vue'

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

ID univoci tramite un contatore

Ogni toast ha bisogno di un id univoco per essere identificato e rimosso. Utilizzi un contatore incrementale, non Date.now(): due toast attivati nello stesso millisecondo potrebbero avere lo stesso timestamp.

let counter = 0

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

La funzione notify

notify è l'API pubblica. Aggiunge un nuovo toast con un id appena generato e ne pianifica la rimozione dopo una determinata durata.

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

Chiudere un toast

dismiss rimuove un toast in base all'id filtrandolo dall'array reattivo. Riassegnare toasts.value mantiene intatta la reattività.

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

Raggruppare tutto in un servizio

Raggruppi lo stato e le funzioni in un unico oggetto servizio. È questo oggetto che il plugin fornisce all'applicazione.

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

Il metodo install del plugin

Il plugin fornisce il servizio tramite app.provide, così qualsiasi componente può iniettarlo. Esportiamo una chiave Symbol per maggiore sicurezza.

export const toastKey = Symbol('toast')

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

Registrare il contenitore dei toast

Il plugin può anche registrare un componente globale ToastContainer che visualizza la coda, così chi utilizza il plugin deve solo inserirlo una volta vicino alla radice dell'app.

import ToastContainer from './ToastContainer.vue'

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

Il template del contenitore

Il contenitore legge la coda iniettata e visualizza ogni toast, con un gestore per la chiusura al clic associato all'id univoco.

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

Un composable di utilità

Avvolga inject in un composable useToast, così i componenti ottengono un'API pulita e un errore esplicativo se il plugin non è stato installato.

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
}

Utilizzarlo in un componente

Infine, qualsiasi componente può attivare notifiche tramite il composable. Registri app.use(toastPlugin) e inserisca <ToastContainer /> una sola volta vicino alla radice.

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

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

Verifica rapida

Verifichi la Sua comprensione della progettazione del plugin per i toast.

Riepilogo

Ha creato un plugin per i toast:

  • Un array ref reattivo contiene la coda dei toast
  • Un contatore incrementale assegna id univoci senza collisioni
  • notify è l'API pubblica; dismiss rimuove un toast in base all'id
  • install fornisce il servizio tramite app.provide
  • Un composable useToast avvolge inject per un utilizzo più pratico

Domande Frequenti

La lezione «Esempio di plugin per notifiche e toast» è gratuita?

Sì — il testo completo di «Esempio di plugin per notifiche e toast» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Esempio di plugin per notifiche e toast»?

Creazione di un plugin toaster: coda reattiva, logica di installazione, API programmatica tramite provide/inject. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Esempio di plugin per notifiche e toast»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Architettura dei plugin e app.use()
  2. Proprietà globali e provide/inject nei plugin
  3. Esempio di plugin per notifiche e toast
  4. Pubblicazione e tipizzazione dei plugin Vue
← Torna a Vue Academy