Vue 3全局可访问Toast组件单实例实现方案咨询

这问题我之前在Vue3项目迁移时也踩过坑，试了Provide/Inject、根实例hack都觉得别扭，最后摸索出一个完全脱离组件上下文、简洁维护单实例的方案，直接上代码：

第一步：实现基础Toast组件 #

先写你的Toast.vue组件，用<script setup>实现显示/隐藏逻辑：

<template>
  <div v-if="visible" class="toast">
    {{ message }}
  </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const message = ref('')

// 对外暴露控制方法
const show = (text, duration = 2000) => {
  message.value = text
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, duration)
}

const hide = () => {
  visible.value = false
}

defineExpose({ show, hide })
</script>

<style scoped>
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 4px;
  z-index: 9999;
}
</style>

第二步：创建全局Toast管理模块 #

新建utils/toast.js，这里负责创建单实例并挂载到DOM，同时暴露调用方法：

import { createApp } from 'vue'
import Toast from '../components/Toast.vue'

// 创建单实例
const toastInstance = createApp(Toast).mount(document.createElement('div'))
// 把实例挂载到body
document.body.appendChild(toastInstance.$el)

// 对外暴露全局调用方法
export const toast = {
  show: (text, duration) => toastInstance.show(text, duration),
  hide: () => toastInstance.hide()
}

第三步：全局调用（任何地方都能用） #

不管是组件的<script setup>里，还是普通JS工具函数里，直接导入调用就行：

// 组件里调用
import { toast } from '@/utils/toast'

setup() {
  const handleClick = () => {
    toast.show('操作成功！', 3000)
  }
  return { handleClick }
}

// 普通JS文件里调用
import { toast } from '@/utils/toast'
function fetchData() {
  try {
    // 请求逻辑
  } catch (err) {
    toast.show('请求失败，请重试')
  }
}

为什么这方案靠谱？ #

• 单实例复用：全程只创建一个Toast实例，不会重复挂载DOM，性能友好
• 无上下文依赖：完全不需要this、provide/inject或者根实例，Vue3的Composition风格完美适配
• 调用简洁：和Vue2的this.$toast.show()几乎一样的体验，学习成本低
• 扩展性强：后续要加Toast的类型（成功/错误/警告）、位置调整，直接在组件和管理模块里扩展就行

内容的提问来源于stack exchange，提问作者Eli