Vue Academy · Ders

Bildirim ve Toast Eklentisi Örneği

Bir toast eklentisi oluşturma: reaktif kuyruk, kurulum mantığı ve provide/inject ile programatik API.

Bildirim ve Toast Eklentisi Örneği, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Hedef: Bir Toast Eklentisi

Bir toast bildirimi eklentisi oluşturacağız. Mesajlardan oluşan reaktif bir kuyruğu yönetir, bir notify API'si sunar ve toast bildirimlerini global olarak oluşturur. Herhangi bir bileşen, inject veya bileştirilebilir bir işlev aracılığıyla toast bildirimi tetikleyebilir.

Reaktif Kuyruk

Temel durum, toast nesnelerinden oluşan bir dizi tutan reaktif bir ref'tir. Öğeleri eklediğimizde veya kaldırdığımızda kuyruğu oluşturan her bileşen otomatik olarak güncellenir.

import { ref } from 'vue'

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

Sayaçla Benzersiz Kimlikler

Her toast bildiriminin anahtarlama ve kaldırma için benzersiz bir id'ye ihtiyacı vardır. Date.now() yerine artan counter kullanın; aynı milisaniyede tetiklenen iki toast bildirimi zaman damgasıyla çakışabilir.

let counter = 0

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

notify İşlevi

notify genel API'dir. Yeni bir toast bildirimini yeni bir kimlikle kuyruğa ekler ve belirli bir süre sonra kaldırılmasını planlar.

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

Toast Bildirimini Kapatma

dismiss, reaktif diziden filtreleyerek bir toast bildirimini kimliğine göre kaldırır. toasts.value değerini yeniden atamak reaktiviteyi korur.

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

Bir Hizmette Birleştirme

Durumu ve işlevleri tek bir hizmet nesnesinde gruplayın. Eklentinin app'e sağladığı nesne budur.

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

Eklentinin install Yöntemi

Eklenti, herhangi bir bileşenin hizmeti enjekte edebilmesi için hizmeti app.provide aracılığıyla sunar. Güvenlik amacıyla bir Symbol anahtarı dışa aktarırız.

export const toastKey = Symbol('toast')

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

ToastContainer Kaydetme

Eklenti, kuyruğu oluşturan global bir ToastContainer bileşenini de kaydedebilir; böylece kullanıcı bunu app kökünün yakınına yalnızca bir kez ekler.

import ToastContainer from './ToastContainer.vue'

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

Kapsayıcı Şablonu

Kapsayıcı, enjekte edilen kuyruğu okur ve her toast bildirimini, benzersiz kimliğe göre çalışan tıklayarak kapatma işleyicisiyle oluşturur.

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

Kolaylık Sağlayan Bileştirilebilir İşlev

Bileşenlerin temiz bir API alması ve eklenti yüklenmemişse yararlı bir hata görmesi için enjeksiyonu bir useToast bileştirilebilir işleviyle sarın.

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
}

Bir Bileşende Kullanma

Son olarak, herhangi bir bileşen bildirimleri bileştirilebilir işlev aracılığıyla tetikler. app.use(toastPlugin) kaydını yapın ve kökün yakınına bir kez <ToastContainer /> yerleştirin.

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

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

Hızlı Kontrol

Toast eklentisi tasarımını ne kadar anladığınızı sınayın.

Özet

Bir toast eklentisi oluşturdunuz:

Reaktif bir ref dizisi toast kuyruğunu tutar
Artan counter, çakışmasız benzersiz kimlikler sağlar
notify genel API'dir; dismiss kimliğe göre kaldırır
install, hizmeti app.provide aracılığıyla sunar
Bir useToast bileştirilebilir işlevi, kolay kullanım için inject işlevini sarar

Sıkça Sorulan Sorular

“Bildirim ve Toast Eklentisi Örneği” dersi ücretsiz mi?

Evet — “Bildirim ve Toast Eklentisi Örneği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Bildirim ve Toast Eklentisi Örneği” dersinde ne öğreneceğim?

Bir toast eklentisi oluşturma: reaktif kuyruk, kurulum mantığı ve provide/inject ile programatik API. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Bildirim ve Toast Eklentisi Örneği” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Eklenti Mimarisi ve app.use()
Eklentilerde Genel Özellikler ve provide/inject
Bildirim ve Toast Eklentisi Örneği
Vue Eklentilerini Yayınlama ve Türlendirme

← Vue Academy Sayfasına Dön