Vue Academy · Pelajaran

Contoh Plugin Notifikasi dan Toast

Membangun plugin toaster: antrean reaktif, logika install, serta API terprogram melalui provide/inject.

Contoh Plugin Notifikasi dan Toast adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Tujuan: Pengaya Notifikasi

Kita akan membangun pengaya notifikasi singkat. Pengaya ini mempertahankan antrean pesan reaktif, mengekspos API notify, dan merender notifikasi secara global. Komponen mana pun dapat memicu notifikasi melalui inject atau komposabel.

Antrean Reaktif

Status inti adalah ref reaktif yang menyimpan larik objek notifikasi. Saat kita melakukan push atau menghapus item, setiap komponen yang merender antrean akan diperbarui secara otomatis.

import { ref } from 'vue'

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

ID Unik melalui Pencacah

Setiap notifikasi memerlukan id unik untuk penetapan kunci dan penghapusan. Gunakan pencacah yang terus bertambah, bukan Date.now() — dua notifikasi yang dipicu dalam milidetik yang sama dapat bertabrakan jika menggunakan stempel waktu.

let counter = 0

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

Fungsi notify

notify adalah API publik. Fungsi ini menambahkan notifikasi baru dengan ID baru dan menjadwalkan penghapusannya setelah durasi tertentu.

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

Menutup Notifikasi

dismiss menghapus notifikasi berdasarkan ID dengan menggunakan filter untuk mengeluarkannya dari larik reaktif. Menetapkan ulang toasts.value menjaga reaktivitas tetap utuh.

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

Menggabungkan Menjadi Layanan

Kelompokkan status dan fungsi ke dalam satu objek layanan. Objek inilah yang disediakan pengaya untuk aplikasi.

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

Metode install Pengaya

install pengaya menyediakan layanan melalui app.provide agar komponen mana pun dapat menginjeksi layanan tersebut. Kami mengekspor kunci Symbol demi keamanan.

export const toastKey = Symbol('toast')

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

Mendaftarkan Wadah Notifikasi

Pengaya juga dapat mendaftarkan komponen global ToastContainer yang merender antrean, sehingga pengguna cukup menempatkannya satu kali di dekat akar aplikasi.

import ToastContainer from './ToastContainer.vue'

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

Templat Wadah

Wadah membaca antrean yang diinjeksi dan merender setiap notifikasi, dengan penangan klik untuk menutupnya berdasarkan ID unik.

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

Komposabel Praktis

Bungkus injeksi tersebut dalam komposabel useToast agar komponen memperoleh API yang sederhana dan kesalahan yang informatif jika pengaya belum dipasang.

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
}

Menggunakannya dalam Komponen

Terakhir, komponen mana pun dapat memicu notifikasi melalui komposabel. Daftarkan app.use(toastPlugin) dan tempatkan <ToastContainer /> satu kali di dekat akar aplikasi.

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

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

Pemeriksaan Cepat

Uji pemahaman Anda tentang rancangan pengaya notifikasi.

Rangkuman

Anda telah membangun pengaya notifikasi:

Larik ref reaktif menyimpan antrean notifikasi
Pencacah yang terus bertambah memberikan ID unik tanpa benturan
notify adalah API publik; dismiss menghapus berdasarkan ID
install menyediakan layanan melalui app.provide
Komposabel useToast membungkus inject agar mudah digunakan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Contoh Plugin Notifikasi dan Toast” gratis?

Ya — teks lengkap “Contoh Plugin Notifikasi dan Toast” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Contoh Plugin Notifikasi dan Toast”?

Membangun plugin toaster: antrean reaktif, logika install, serta API terprogram melalui provide/inject. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Contoh Plugin Notifikasi dan Toast” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Arsitektur Plugin dan app.use()
Properti Global dan provide/inject dalam Plugin
Contoh Plugin Notifikasi dan Toast
Mempublikasikan dan Mengetik Plugin Vue

← Kembali ke Vue Academy