Skip to content

Продвинутое использование

Event emitter

Подписывайтесь на события очереди для интеграции с аналитикой (Sentry, Amplitude и т. д.). Все слушатели возвращают функцию отписки.

ts
import { getOrCreateGlobalContext } from 'vue-toast-kit'

const queue = getOrCreateGlobalContext().queue

const off = queue.onAdd((item) => {
  analytics.track('toast_shown', { type: item.options.type, message: item.message })
})

queue.onDismiss((id) => {
  analytics.track('toast_dismissed', { id })
})

queue.onUpdate((id, partial) => {
  analytics.track('toast_updated', { id, ...partial })
})

// Отписка, когда закончили:
off()

Ограничение частоты и сохранение в localStorage

ts
import { createToastContext } from 'vue-toast-kit'

// Максимум 3 тоста в секунду; лишние тихо отбрасываются
const ctx = createToastContext({ rateLimit: 3, rateLimitWindowMs: 1000 })

// Восстанавливать тосты с persist:true после перезагрузки страницы
const ctx2 = createToastContext({ persistStorage: true })

Или настройте глобально через плагин:

ts
app.use(VueToastPlugin, {
  rateLimit: 5,
  persistStorage: true,
})

Отметьте отдельные тосты как персистентные:

ts
toast.info('Maintenance window tonight', { persist: true, duration: 0 })
// Этот тост переживёт перезагрузку страницы

Утилиты для тестирования

ts
import { createMockToast, mockUseToast } from 'vue-toast-kit/testing'

// В тесте Vitest / Jest:
describe('MyComponent', () => {
  it('calls toast.success on save', async () => {
    const mockToast = mockUseToast()
    vi.mock('vue-toast-kit', () => ({ useToast: () => mockToast }))

    // рендерим компонент, вызываем save…

    expect(mockToast.success).toHaveBeenCalledWith('Saved!')
  })
})

// Создать минимальную заглушку ToastItem:
const item = createMockToast({
  message: 'Upload complete',
  options: { type: 'success', duration: 3000 },
})