如何在Quasar Vue3中实现全局通用通知函数？

下面给你三种实用的方式，按需选择即可：

方案1：创建独立工具函数文件（最直观，推荐Composition API场景） #

在项目的src/utils目录下新建一个notify.js（TS项目用notify.ts），把你的函数放进去：

import { useQuasar } from 'quasar'

export const positivemsg = function(msg) {
  const $q = useQuasar()
  $q.notify({
    type: 'positive',
    message: msg,
    position:'top-right',
    timeout:800
  })
}

之后在任何组件里，直接导入调用：

// <script setup>里的用法
import { positivemsg } from '@/utils/notify'

// 调用示例
positivemsg('操作成功！')

优点：逻辑独立清晰，按需导入不污染全局，完全契合Vue3 Composition API的风格。

方案2：挂载到Vue全局属性（适合习惯选项式API的场景） #

在项目入口文件src/main.js（TS项目是main.ts）里，把函数挂载到Vue的全局属性上：

import { createApp } from 'vue'
import App from './App.vue'
import { Quasar, useQuasar } from 'quasar'

const app = createApp(App)

// 定义全局通知函数
app.config.globalProperties.$positivemsg = function(msg) {
  const $q = useQuasar()
  $q.notify({
    type: 'positive',
    message: msg,
    position:'top-right',
    timeout:800
  })
}

app.use(Quasar, {
  // 你的Quasar配置项
}).mount('#app')

调用方式：

• 选项式API组件里直接用：this.$positivemsg('操作成功！')
• <script setup>里需要借助getCurrentInstance：

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
instance?.proxy?.$positivemsg('操作成功！')

方案3：用Quasar官方推荐的Boot文件（适配Quasar项目规范） #

Quasar的Boot文件专门用来初始化全局功能，步骤如下：

1. 手动在src/boot目录下新建notify.js，或者执行Quasar命令生成：quasar new boot notify
2. 在src/boot/notify.js里写入：

import { useQuasar } from 'quasar'

export default ({ app }) => {
  // 挂载到全局属性，供选项式API使用
  app.config.globalProperties.$positivemsg = function(msg) {
    const $q = useQuasar()
    $q.notify({
      type: 'positive',
      message: msg,
      position:'top-right',
      timeout:800
    })
  }

  // 提供注入函数，供Composition API的<script setup>使用
  app.provide('positivemsg', function(msg) {
    const $q = useQuasar()
    $q.notify({
      type: 'positive',
      message: msg,
      position:'top-right',
      timeout:800
    })
  })
}

3. 在quasar.config.js的boot数组里添加这个文件：

module.exports = function (/* ctx */) {
  return {
    // ...其他配置
    boot: [
      // ...已有的boot文件
      'notify'
    ],
    // ...其他配置
  }
}

调用方式：

• 选项式API：this.$positivemsg('操作成功！')
• <script setup>：

import { inject } from 'vue'

const positivemsg = inject('positivemsg')
positivemsg?.('操作成功！')

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