如何在Quasar中全局使用变量、工具函数及组合式函数？

下面针对不同类型的内容，给出类似组件全局注册的简化复用方案：

一、全局注册工具函数/变量（类似app.component的方式） #

用app.config.globalProperties挂载（Vue3） #

这是最贴近组件全局注册的实现方式，直接在应用实例上挂载，所有组件都能访问：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 导入你的工具函数和变量
import { showError } from './utils/errorHandler'
import { BASE_API_URL } from './config/env'

const app = createApp(App)

// 挂载工具函数
app.config.globalProperties.$showError = showError
// 挂载全局变量
app.config.globalProperties.$BASE_API = BASE_API_URL

app.mount('#app')

组件内使用方式：

• 选项式API：直接通过this访问

  this.$showError('请求失败，请稍后重试')
  console.log(this.$BASE_API)
  

• 组合式API：通过getCurrentInstance获取应用上下文

  import { getCurrentInstance } from 'vue'
  
  const appContext = getCurrentInstance()?.appContext
  const $showError = appContext?.config.globalProperties.$showError
  $showError('测试错误提示')
  

二、简化组合式函数的复用 #

组合式函数无法直接像组件那样注册，但可以通过插件或统一导出入口来减少重复导入：

1. 封装为Vue插件（全局提供） #

把组合式函数封装成插件，通过provide让所有组件可注入：

// src/plugins/composables.js
import { useUserAuth } from '@/composables/useUserAuth'
import { useCart } from '@/composables/useCart'

export default {
  install(app) {
    // 为每个组合式函数提供全局注入标识
    app.provide('useUserAuth', useUserAuth)
    app.provide('useCart', useCart)
  }
}

在main.js注册插件：

// main.js
import composablePlugins from './plugins/composables'

app.use(composablePlugins)

组件内通过inject使用：

import { inject } from 'vue'

const useUserAuth = inject('useUserAuth')
const { userInfo, login } = useUserAuth()

2. 创建统一导出入口（按需导入，减少重复路径） #

如果不想用全局注入，可以把所有组合式函数集中导出到一个入口文件：

// src/composables/index.js
export { useUserAuth } from './useUserAuth'
export { useCart } from './useCart'
export { useTheme } from './useTheme'

组件内只需导入这个入口文件：

import { useUserAuth } from '@/composables'

三、通用简化方案：全局模块聚合 #

不管是工具函数还是组合式函数，都可以创建一个全局聚合模块，统一导出所有需要复用的内容：

// src/utils/global.js
// 导入工具函数
export { showError, formatDate } from './tools'
// 导入全局变量
export { BASE_API_URL, APP_TITLE } from '../config'
// 导入组合式函数
export { useUserAuth } from '../composables/useUserAuth'

组件内只需导入这个文件就能获取所有需要的内容：

import { showError, BASE_API_URL, useUserAuth } from '@/utils/global'

注意事项 #

• 不要过度使用全局挂载，过多的全局内容会增加应用初始化负担，也不利于代码溯源和维护。
• 组合式函数更推荐用统一导出入口或按需导入的方式，比全局注入更直观。
• Vue2环境下，对应使用Vue.prototype替代app.config.globalProperties，用法逻辑一致。

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