Продвинутое использование
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 },
})