Vue Academy · 课时

通知与 Toast 插件示例

构建 Toast 插件：响应式队列、安装逻辑，以及通过 provide/inject 实现编程式 API

通知与 Toast 插件示例 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

目标：提示消息插件

我们将构建一个提示消息通知插件。它会维护一个响应式消息队列，公开 notify API，并在全局渲染提示消息。任何组件都可以通过 inject 或可组合函数触发提示消息。

响应式队列

核心状态是一个保存提示消息对象数组的响应式 ref。当我们执行 push 或移除项目时，渲染该队列的每个组件都会自动更新。

import { ref } from 'vue'

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

通过计数器生成唯一 ID

每条提示消息都需要一个唯一的 id，用于设置键和移除消息。请使用递增计数器，而不要使用 Date.now()——在同一毫秒内触发的两条提示消息可能会因时间戳相同而发生冲突。

let counter = 0

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

通知函数

notify 是公共 API。它会推入一条带有新 ID 的提示消息，并安排在指定时长后将其移除。

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

关闭提示消息

dismiss 会通过将提示消息过滤出响应式数组，按 ID 移除对应的消息。重新赋值 toasts.value 可以保持响应性。

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

打包为 service

将状态和函数组合成一个 service 对象。插件会将这个对象提供给 app。

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

插件的安装方法

插件通过 app.provide 提供 service，使任何组件都能注入它。我们会导出一个 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)
}

容器模板

容器会读取注入的队列并渲染每条提示消息，同时通过唯一 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>

便捷的可组合函数

将注入操作封装在 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 />。

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

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

快速检查

请检验您对提示消息插件设计的理解。

回顾

您构建了一个提示消息插件：

响应式 ref 数组保存提示消息队列
递增计数器生成不会冲突的唯一 ID
notify 是公共 API；dismiss 按 ID 移除提示消息
install 通过 app.provide 提供 service
useToast 可组合函数封装了 inject，使用更加简便

常见问题解答

「通知与 Toast 插件示例」课时是免费的吗？

是的 — 「通知与 Toast 插件示例」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「通知与 Toast 插件示例」这节课中我会学到什么？

构建 Toast 插件：响应式队列、安装逻辑，以及通过 provide/inject 实现编程式 API 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「通知与 Toast 插件示例」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy