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

Question

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

我已经寻找了几种方法：就像这篇 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 })

Answer 1

有两个问题：

1. 您只能在Vue 组件的生命周期钩子中使用getCurrentInstancesetup
2. 添加的属性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

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

虽然我可能只使用单个名称（或者emitter）bus:)