src/stores/toast.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useToastStore = defineStore('toast', () => {
  // 状态
  const toasts = ref([])
  const nextId = ref(1)
  
  // 方法
  const addToast = (message, type = 'info', duration = 3000) => {
    const id = nextId.value++
    const toast = {
      id,
      message,
      type,
      duration,
      timestamp: Date.now()
    }
    
    toasts.value.push(toast)
    
    // 自动移除
    if (duration > 0) {
      setTimeout(() => {
        removeToast(id)
      }, duration)
    }
    
    return id
  }
  
  const removeToast = (id) => {
    const index = toasts.value.findIndex(toast => toast.id === id)
    if (index > -1) {
      toasts.value.splice(index, 1)
    }
  }
  
  const clearAll = () => {
    toasts.value = []
  }
  
  // 便捷方法
  const success = (message, duration) => {
    return addToast(message, 'success', duration)
  }
  
  const error = (message, duration) => {
    return addToast(message, 'error', duration)
  }
  
  const warning = (message, duration) => {
    return addToast(message, 'warning', duration)
  }
  
  const info = (message, duration) => {
    return addToast(message, 'info', duration)
  }
  
  return {
    // 状态
    toasts,
    
    // 方法
    addToast,
    removeToast,
    clearAll,
    success,
    error,
    warning,
    info
  }
})