Vue Academy · บทเรียน

ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast

การสร้างปลั๊กอิน toaster: คิวแบบรีแอกทีฟ ตรรกะการติดตั้ง และ API แบบใช้โปรแกรมผ่าน provide/inject

ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เป้าหมาย: ปลั๊กอินการแจ้งเตือนแบบโทสต์

เราจะสร้างปลั๊กอินการแจ้งเตือนแบบโทสต์ ปลั๊กอินนี้ดูแลคิวข้อความแบบตอบสนอง เปิดให้ใช้ API notify และแสดงการแจ้งเตือนแบบโทสต์ทั่วทั้งระบบ คอมโพเนนต์ใด ๆ ก็เรียกใช้การแจ้งเตือนได้ผ่าน inject หรือฟังก์ชันแบบใช้ซ้ำได้

คิวแบบตอบสนอง

สถานะแกนหลักคือ ref แบบตอบสนองที่เก็บอาร์เรย์ของออบเจ็กต์การแจ้งเตือนแบบโทสต์ เมื่อเราใช้ push หรือ นำรายการออก คอมโพเนนต์ทุกตัวที่แสดงคิวจะอัปเดตโดยอัตโนมัติ

import { ref } from 'vue'

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

รหัสไม่ซ้ำกันด้วยตัวนับ

การแจ้งเตือนแบบโทสต์แต่ละรายการต้องมี id ที่ไม่ซ้ำกันเพื่อใช้กำหนดคีย์และนำออก ให้ใช้ตัวนับที่เพิ่มขึ้นเรื่อย ๆ ไม่ใช่ Date.now() — การแจ้งเตือนแบบโทสต์สองรายการที่เรียกใช้ภายในมิลลิวินาทีเดียวกันอาจมีเวลาประทับซ้ำกัน

let counter = 0

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

ฟังก์ชัน notify

notify คือ API สาธารณะ ฟังก์ชันนี้เพิ่มการแจ้งเตือนแบบโทสต์รายการใหม่พร้อมรหัสใหม่ และกำหนดเวลานำรายการออกหลังผ่านช่วงเวลาที่กำหนด

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

การปิดการแจ้งเตือนแบบโทสต์

dismiss นำการแจ้งเตือนแบบโทสต์ออกตามรหัส โดยกรองรายการนั้นออกจากอาร์เรย์แบบตอบสนอง การกำหนดค่าใหม่ให้ toasts.value จะรักษาการตอบสนองเอาไว้

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

การรวมเป็นบริการ

รวมสถานะและฟังก์ชันต่าง ๆ ไว้ในออบเจ็กต์บริการเดียว ออบเจ็กต์นี้คือสิ่งที่ปลั๊กอินให้แก่ app

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

วิธีการติดตั้งของปลั๊กอิน

ปลั๊กอินใช้ app.provide เพื่อให้บริการ เพื่อให้คอมโพเนนต์ใด ๆ ก็ฉีดบริการนี้ได้ เราส่งออกคีย์ Symbol เพื่อความปลอดภัย

export const toastKey = Symbol('toast')

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

การลงทะเบียนคอนเทนเนอร์การแจ้งเตือน

ปลั๊กอินยังสามารถลงทะเบียนคอมโพเนนต์ส่วนกลาง ToastContainer ที่แสดงคิวได้ด้วย ดังนั้นผู้ใช้เพียงวางคอมโพเนนต์นี้หนึ่งครั้งใกล้รากของ app

import ToastContainer from './ToastContainer.vue'

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

แม่แบบของคอนเทนเนอร์

คอนเทนเนอร์อ่านคิวที่ฉีดไว้และแสดงการแจ้งเตือนแบบโทสต์แต่ละรายการ พร้อมตัวจัดการคลิกเพื่อปิดการแจ้งเตือนที่ใช้รหัสไม่ซ้ำกันเป็นคีย์

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

ฟังก์ชันแบบใช้ซ้ำเพื่อความสะดวก

ห่อการใช้ inject ไว้ในฟังก์ชันแบบใช้ซ้ำ useToast เพื่อให้คอมโพเนนต์มี API ที่สะอาดและได้รับข้อผิดพลาดที่เข้าใจง่ายหากยังไม่ได้ติดตั้งปลั๊กอิน

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
}

การใช้ในคอมโพเนนต์

สุดท้าย คอมโพเนนต์ใด ๆ ก็เรียกใช้การแจ้งเตือนได้ผ่านฟังก์ชันแบบใช้ซ้ำ ลงทะเบียนด้วย app.use(toastPlugin) และวาง <ToastContainer /> หนึ่งครั้งใกล้รากของ app

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

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

ตรวจความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับการออกแบบปลั๊กอินการแจ้งเตือนแบบโทสต์

ทบทวน

คุณได้สร้างปลั๊กอินการแจ้งเตือนแบบโทสต์:

อาร์เรย์ ref แบบตอบสนองเก็บคิวการแจ้งเตือนแบบโทสต์
ตัวนับที่เพิ่มขึ้นเรื่อย ๆ สร้างรหัสที่ไม่ซ้ำกันและไม่ชนกัน
notify คือ API สาธารณะ ส่วน dismiss ใช้นำรายการออกตามรหัส
install ให้บริการผ่าน app.provide
ฟังก์ชันแบบใช้ซ้ำ useToast ห่อ inject ไว้เพื่อให้ใช้งานได้สะดวก

คำถามที่พบบ่อย

บทเรียน “ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast”

การสร้างปลั๊กอิน toaster: คิวแบบรีแอกทีฟ ตรรกะการติดตั้ง และ API แบบใช้โปรแกรมผ่าน provide/inject คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

สถาปัตยกรรมปลั๊กอินและ app.use()
คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน
ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast
การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue

← กลับไปที่ Vue Academy