Vue Academy · Oppitunti

Ilmoitus- ja toast-liitännäisesimerkki

Toaster-liitännäisen rakentaminen: reaktiivinen jono, asennuslogiikka ja ohjelmallinen API provide/injectillä

Oppitunti 3/413 vaihetta

Ilmoitus- ja toast-liitännäisesimerkki on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Tavoite: toast-plugin

Rakennamme toast-ilmoituksia tuottavan pluginin. Se ylläpitää reaktiivista viestijonoa, tarjoaa notify-rajapinnan ja renderöi toastit globaalisti. Mikä tahansa komponentti voi käynnistää toastin inject-kutsulla tai composablella.

Reaktiivinen jono

Ydintila on reaktiivinen ref, joka sisältää taulukon toast-objekteja. Kun alkioita lisätään tai poistetaan, jokainen jonoa renderöivä komponentti päivittyy automaattisesti.

import { ref } from 'vue'

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

Yksilölliset tunnisteet laskurin avulla

Jokainen toast tarvitsee yksilöllisen id-tunnisteen avaimen muodostamista ja poistamista varten. Käyttäkää kasvavaa laskuria, älkää Date.now()-funktiota — samassa millisekunnissa käynnistettyjen kahden toastin aikaleimat olisivat samat.

let counter = 0

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

notify-funktio

notify on julkinen API. Se lisää uuden toastin uudella id:llä ja ajastaa sen poistamisen annetun keston jälkeen.

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

Toastin poistaminen

dismiss poistaa toastin id:n perusteella suodattamalla sen pois reaktiivisesta taulukosta. Arvon toasts.value uudelleenmäärittäminen säilyttää reaktiivisuuden.

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

Palveluksi kokoaminen

Kootkaa tila ja funktiot yhdeksi palveluobjektiksi. Tämä objekti on se, jonka plugin tarjoaa sovellukselle.

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

Pluginin install-metodi

Pluginin install-funktio tarjoaa palvelun app.provide-kutsulla, jotta mikä tahansa komponentti voi injektoida sen. Viekää Symbol-avain turvallista käyttöä varten.

export const toastKey = Symbol('toast')

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

Toast-kontainerin rekisteröiminen

Plugin voi myös rekisteröidä globaalin ToastContainer-komponentin, joka renderöi jonon. Näin pluginin käyttäjän tarvitsee vain lisätä kontaineri kerran sovelluksen juuren lähelle.

import ToastContainer from './ToastContainer.vue'

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

Kontainerin template

Kontaineri lukee injektoidun jonon ja renderöi jokaisen toastin. Poistaminen tapahtuu napsautuskäsittelijällä, jonka avaimena on yksilöllinen id.

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

Kätevyyttä lisäävä composable

Käärikää inject-kutsu useToast-composableen, jotta komponentit saavat selkeän rajapinnan ja hyödyllisen virheilmoituksen, jos pluginia ei ole asennettu.

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
}

Käyttäminen komponentissa

Lopuksi mikä tahansa komponentti käynnistää ilmoituksia composablella. Rekisteröikää app.use(toastPlugin) ja sijoittakaa <ToastContainer /> kerran lähelle juurikomponenttia.

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

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

Pikatesti

Testatkaa, miten hyvin ymmärrätte toast-pluginin suunnittelun.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Rakensitte toast-pluginin:

Reaktiivinen ref-taulukko sisältää toast-jonon
Kasvava laskuri tuottaa törmäyksiltä suojatut yksilölliset id-tunnisteet
notify on julkinen API, ja dismiss poistaa toastin id:n perusteella
install tarjoaa palvelun app.provide-kutsulla
useToast-composable käärii inject-kutsun helppokäyttöiseksi rajapinnaksi

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Ilmoitus- ja toast-liitännäisesimerkki” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Ilmoitus- ja toast-liitännäisesimerkki”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Ilmoitus- ja toast-liitännäisesimerkki”?

Toaster-liitännäisen rakentaminen: reaktiivinen jono, asennuslogiikka ja ohjelmallinen API provide/injectillä Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Ilmoitus- ja toast-liitännäisesimerkki”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Liitännäisarkkitehtuuri ja app.use()
Globaalit ominaisuudet ja provide/inject liitännäisissä
Ilmoitus- ja toast-liitännäisesimerkki
Vue-liitännäisten julkaiseminen ja tyypitys

← Takaisin: Vue Academy