uniapp中vue3、ts如何使用getApp方法实现全局调用

在uniapp中使用Vue3和TypeScript时，如何正确通过getApp方法实现全局调用？我按照官方文档尝试后，发现类型提示不完整，且调用时会出现undefined的情况。请问具体应该如何声明类型，以及在setup中如何安全地获取全局应用实例？最好能提供完整的代码示例。

2 回复

在uniapp中，使用Vue3+TS调用getApp方法：

import { getApp } from 'vue'

// 获取应用实例
const app = getApp()

// 调用全局方法
app.globalData.someMethod()

注意：需要先在main.ts中创建并配置好应用实例。


在 UniApp 中使用 Vue 3 和 TypeScript 时，可以通过 getApp() 方法获取全局应用实例，实现跨页面或组件的全局数据或方法调用。以下是具体实现步骤和代码示例：

1. 在 app.vue 中定义全局数据或方法

在 app.vue 的 setup() 中，通过 getApp() 获取应用实例并挂载属性。

// app.vue
import { createApp } from 'vue';
import { getApp } from 'uni-app';

const app = createApp({
  setup() {
    // 定义全局数据
    const globalData = {
      version: '1.0.0',
      userToken: 'example_token'
    };

    // 定义全局方法
    const globalMethod = () => {
      console.log('全局方法被调用');
    };

    // 挂载到全局应用实例
    const appInstance = getApp();
    appInstance.globalData = globalData;
    appInstance.globalMethod = globalMethod;

    return {};
  }
});

app.mount('#app');

2. 在页面或组件中调用全局数据或方法

通过 getApp() 获取应用实例，直接访问全局属性或方法。

// pages/index/index.vue
import { onMounted } from 'vue';
import { getApp } from 'uni-app';

export default {
  setup() {
    onMounted(() => {
      const app = getApp();
      
      // 调用全局数据
      console.log('应用版本:', app.globalData.version);
      
      // 调用全局方法
      app.globalMethod();
    });

    return {};
  }
};

3. TypeScript 类型支持（可选）

为全局实例添加类型定义，避免 TypeScript 报错。在 shims-uni.d.ts 中扩展 UniApp.App 类型：

// shims-uni.d.ts
declare namespace UniApp {
  interface App {
    globalData: {
      version: string;
      userToken: string;
    };
    globalMethod: () => void;
  }
}

注意事项：

  • 确保在 app.vue 中先挂载全局属性，再在其他页面调用。
  • 使用 getApp() 时需导入 uni-app 模块。
  • 全局数据非响应式，修改后需手动触发更新。

通过以上步骤，即可在 UniApp 的 Vue 3 + TypeScript 项目中实现全局调用。

回到顶部