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

Question

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

我四处寻找了几种方法：，并尝试组合以下元素：

\ 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

尝试包装用于合成-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

有两个问题：

您只能在 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）:)

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

How to access `app.config.globalProperties` in a`<script setup lang="ts">`?

event-bus

vuejs3

vue-composition-api

vue-script-setup