vue实现getapp

Vue 中实现类似 getApp 的功能

在 Vue 中可以通过全局属性或依赖注入的方式实现类似小程序中 getApp() 的功能，获取全局应用实例。

通过全局属性

在 Vue 3 中可以通过 app.config.globalProperties 添加全局属性：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 添加全局属性
app.config.globalProperties.$app = app

app.mount('#app')

在组件中使用：

export default {
  mounted() {
    const app = this.$app
    // 使用 app 实例
  }
}

通过 Provide/Inject

Vue 提供了依赖注入机制，可以在根组件提供应用实例：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 提供应用实例
app.provide('app', app)

app.mount('#app')

在子组件中注入：

export default {
  inject: ['app'],
  mounted() {
    const app = this.app
    // 使用 app 实例
  }
}

直接导出应用实例

也可以直接导出应用实例供其他模块使用：

// app.js
import { createApp } from 'vue'
import App from './App.vue'

export const app = createApp(App)
app.mount('#app')

在其他文件中导入：

import { app } from './app'

// 使用 app 实例

注意事项

• 全局属性方式简单但可能污染组件实例
• 依赖注入方式更符合 Vue 的设计理念
• 直接导出实例适用于模块化程度较高的项目
• 避免过度使用全局实例，优先考虑组件间通信方式