如何在`<script setup lang="ts">`中访问`app.config.globalProperties`？

【问题标题】：How to access `app.config.globalProperties` in a`<script setup lang="ts">`?如何在`<script setup lang="ts">`中访问`app.config.globalProperties`？
【发布时间】：2021-07-18 05:16:18
【问题描述】：

如何通过<script setup lang="ts">访问app.config.globalProperties？

我环顾了几种方法：like this SO post，并尝试组合以下元素：

\\ main.ts

import mitt from 'mitt'
const emitter = mitt()

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    emitter: typeof mitt
  }
}

app.config.globalProperties.emitter = emitter

尝试了在 composition-api 中使用的包装 .. 也没有运气

\\ bus.ts

import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const bus = app.appContext.config.globalProperties.emitter // app is undefined

export const useBus = () => ({ bus })

【问题讨论】：

标签： vuejs3 vue-composition-api event-bus vue-script-setup

【解决方案1】：

有两个问题：

您只能在 setup 或 Vue 组件的生命周期挂钩中使用 getCurrentInstance
添加到 app.config.globalProperties 的属性直接在组件实例上公开

所以我的首选解决方案是：

// bus.ts 

import mitt from 'mitt'

export const emitter = mitt()
export const useBus = () => ({ bus: emitter })

// main.ts

import { emitter } from `bus.ts`

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    emitter: typeof emitter
  }
}

app.config.globalProperties.emitter = emitter

现在您可以在选项 API 或模板中使用 this.emitter。和const { bus } = useBus() 在setup

虽然我可能只使用一个名字（emitter 或 bus）:)

【讨论】：