还在为uni-app全局Toast发愁？这套完整方案让你轻松搞定所有提示需求

身为那位长期以来一直密切留意前端开发范畴的小编，我察觉到在 Uni-app 开发里，存在着一个看上去好像挺简单，然而却令诸多开发者感到困扰的交互方面的问题，它就是全局 Toast 提示该如何去实现。这种属于基础功能的情况，在复杂业务情形下有所匮乏，这可直接对开发效率以及用户体验造成了影响，着实值得我们运用深入探究其解决办法。

全局Toast的实现挑战

处于Uni - app跨端开发框架里，Toast提示组件进行全局调用时面临架构方面的难题，传统的uni.showToast API仅仅支持基础文本的显示，没办法满足现代应用对于丰富样式以及交互的需求，而组件化方案又受Vue组件生命周期的限制，难以在非组件环境当中直接调用。

常有开发者，在网络请求拦截器里，需统一给出网络异常的提示，于路由守卫当中，要进行权限状态的提示，而这些场景，俱都超出了传统Toast方案所能涵盖的能力范围，此种局限性致使诸多项目，不得不反复去编写提示代码，进而增加了维护成本。

Wot UI组件库的创新方案

由Wot Design UI组件库所提供的Toast组件，是基于provide/inject机制的那一套，它支持丰富多样的自定义选项，诸如图标、图片、加载状态等多种表现形式，开发者能够在单文件组件之内，借助useToast钩子函数直接去进行调用，其简化了组件内部的使用流程 。

然而，该方案依旧有着显著的限制，useToast必须于setup函数顶层进行调用，并且没办法在Vue组件外的纯粹JavaScript环境里加以使用。这致使在网络拦截器等关键场景当中，开发者依然不能够直接运用这套Toast组件，还需要去寻觅额外的解决办法。

Layout插件的全局集成

用于解决组件全局注册问题的@uni-helper/vite-plugin-uni-layouts插件，借助统一布局管理得以实现。在layouts目录下的默认布局文件那儿，开发者能够进行全局组件的一次性注册，其全部这些组件会自动被注入进所有的页面之中。

这样的方案，规避了于各个页面反复进行导入以及注册组件的繁杂操作，保障了全局组件的一致性，该插件跟Uni-app的Vite构建工具链深度融合，不会对应用打包体积造成显著影响，维持了应用的性能表现。

Pinia状态管理的关键作用

依托Pinia状态管理库，团队研发出了useGlobalToast组合式函数，此函数打造出一个单独的Toast状态存储，用来管理Toast的显示状态、内容以及配置参数等信息，任何模块只要导入该商店就能操控Toast显示 。

这种设计达成了业务逻辑跟UI组件的完全解耦，JavaScript模块无需再依赖Vue组件实例，网络拦截器、工具函数等纯JavaScript环境如今都能够直接调用Toast功能，跨越了原有的架构限制。

GlobalToast组件的实现原理

// src/composables/useGlobalToast.ts
import { defineStore } from 'pinia'
import type { ToastOptions } from 'wot-design-uni/components/wd-toast/types'
interface GlobalToast {
  toastOptions: ToastOptions
  currentPage: string
}
const defaultOptions: ToastOptions = {
  duration: 2000,
  show: false,
}
export const useGlobalToast = defineStore('global-toast', {
  state: (): GlobalToast => ({
    toastOptions: defaultOptions,
    currentPage: '',
  }),
  actions: {
    // 显示 Toast
    show(option: ToastOptions | string) {
      this.currentPage = getCurrentPath()
      const options = CommonUtil.deepMerge(
        defaultOptions,
        typeof option === 'string' ? { msg: option } : option
      ) as ToastOptions
      this.toastOptions = CommonUtil.deepMerge(options, {
        show: true,
        position: options.position || 'middle',
      }) as ToastOptions
    },
    // 成功提示
    success(option: ToastOptions | string) {
      this.show(CommonUtil.deepMerge({
        iconName: 'success',
        duration: 1500,
      }, typeof option === 'string' ? { msg: option } : option) as ToastOptions)
    },
    // 错误提示
    error(option: ToastOptions | string) {
      this.show(CommonUtil.deepMerge({
        iconName: 'error',
        direction: 'vertical',
      }, typeof option === 'string' ? { msg: option } : option) as ToastOptions)
    },
    // 信息提示
    info(option: ToastOptions | string) {
      this.show(CommonUtil.deepMerge({
        iconName: 'info',
      }, typeof option === 'string' ? { msg: option } : option) as ToastOptions)
    },
    // 警告提示
    warning(option: ToastOptions | string) {
      this.show(CommonUtil.deepMerge({
        iconName: 'warning',
      }, typeof option === 'string' ? { msg: option } : option) as ToastOptions)
    },
    // 关闭 Toast
    close() {
      this.toastOptions = defaultOptions
      this.currentPage = ''
    },
  },
})

GlobalToast组件起着连接Pinia状态与Wot UI Toast组件的桥梁作用，借助watch来监听store里的状态变化，当检测到show状态变成true时，该组件会自动去调用Wot Toast的显示方法，同时将配置参数准确传递。

组件运用响应式设计方式，确保无论处于何种环境之中触发的状态改变，都能够在UI层面予以实时呈现。这种设计维持了不错的类型提示以及代码智能感知情况，从而让开发者可以获取完整的TypeScript支持 。

实际应用场景验证

于网络请求拦截器里，开发者当下能够径直导入useGlobalToast store，于请求失败之际展现统一的错误提示。这般用法不再受执行环境的限定，不管是同步代码还是异步代码均可正常运转。

在路由守卫里头，同样能够便利地运用全局Toast，于检测到用户权限不够时马上予以提示。事实测试显示，此方案在H5、微信小程序、App等好些平台都都表现得稳定，样式维持一致。

// 请求拦截器
uni.addInterceptor('request', {
  fail(err) {
    const globalToast = useGlobalToast()
    globalToast.error('网络请求失败')
  }
})
// 或在 API 封装中
export async function apiRequest(url: string, data: any) {
  try {
    const result = await uni.request({ url, data })
    return result
  }
  catch (error) {
    const globalToast = useGlobalToast()
    globalToast.error('请求失败，请重试')
    throw error
  }
}

那些在实际项目里头的各位开发者呀，还碰到过哪些看上去显得蛮简单了然而却难以用一种优雅方式去解决掉的交互方面的问题呢，欢迎来到评论区去分享你自身所拥有的经历以及关于此的解决方案哟，要是你感觉这篇文章是可以给你带来帮助的话呀，请你进行点赞给予支持进而并且把它分享出去给更多有着这种需求的同行们呢。

// 路由守卫
function routeGuard(to: string) {
  const globalToast = useGlobalToast()
  if (!isLogin()) {
    globalToast.warning('请先登录')
    uni.navigateTo({ url: '/pages/login/index' })
    return false
  }
  return true
}