0Pricing
Vue Academy · Урок

Пример плагина уведомлений и всплывающих сообщений

Создание плагина уведомлений: реактивная очередь, логика установки и программный API через provide/inject

«Пример плагина уведомлений и всплывающих сообщений» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Цель: плагин всплывающих уведомлений

Мы создадим плагин уведомлений. Он поддерживает реактивную очередь сообщений, предоставляет API notify и глобально отображает уведомления. Любой компонент может вызвать уведомление через inject или композабл.

Реактивная очередь

Основное состояние — это реактивный ref, содержащий массив объектов уведомлений. При добавлении или удалении элементов каждый компонент, отображающий очередь, обновляется автоматически.

import { ref } from 'vue'

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

Уникальные идентификаторы с помощью counter

Каждому уведомлению нужен уникальный id для идентификации и удаления. Используйте увеличивающийся counter, а не Date.now(): два уведомления, созданные в одну и ту же миллисекунду, столкнутся из-за одинаковой временной метки.

let counter = 0

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

Функция уведомления

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

Объединение в сервис

Объедините состояние и функции в один объект service. Именно этот объект плагин предоставляет приложению.

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

Метод install плагина

Плагин предоставляет service через app.provide, поэтому любой компонент может внедрить его. Для безопасности мы экспортируем ключ Symbol.

export const toastKey = Symbol('toast')

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

Регистрация контейнера уведомлений

Плагин также может зарегистрировать глобальный компонент ToastContainer, отображающий очередь. Поэтому пользователю достаточно один раз разместить его рядом с корнем приложения.

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>

Вспомогательный композабл

Оберните внедрение в композабл 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 хранит очередь уведомлений
  • Увеличивающийся counter обеспечивает уникальные идентификаторы без конфликтов
  • notify — публичный API, а dismiss удаляет уведомление по идентификатору
  • install предоставляет service через app.provide
  • Композабл useToast оборачивает inject для удобного использования

Часто задаваемые вопросы

Урок «Пример плагина уведомлений и всплывающих сообщений» бесплатный?

Да — полный текст урока «Пример плагина уведомлений и всплывающих сообщений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Пример плагина уведомлений и всплывающих сообщений»?

Создание плагина уведомлений: реактивная очередь, логика установки и программный API через provide/inject Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Пример плагина уведомлений и всплывающих сообщений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Архитектура плагинов и app.use()
  2. Глобальные свойства и provide/inject в плагинах
  3. Пример плагина уведомлений и всплывающих сообщений
  4. Публикация и типизация плагинов Vue
← Назад к Vue Academy