Uniapp微信小程序开发：全局变量的使用

简介

本文介绍了在Vue3中实现全局属性共享的两种方法。

第一种是通过app.config.globalProperties全局挂载属性，结合getCurrentInstance()在组合式API中获取组件实例来访问全局属性。

第二种推荐使用provide/inject方案，更符合Vue3设计理念，适合跨层级传递属性，通过app.provide()全局提供属性，再使用inject()注入使用。

两种方式都能有效实现全局状态共享，其中provide/inject方式更组件化且类型安全。

使用 app.config.globalProperties + getCurrentInstance

全局挂载（在入口文件中）

javascript 复制代码

import { createSSRApp } from 'vue';
export function createApp() {
  const app = createSSRApp(App);
  // 挂载全局属性
  app.config.globalProperties.$Hello = 'Hello vue3'; 
  return {
    app
  };
}

在组合式 API 中使用

javascript 复制代码

<script setup>
import { getCurrentInstance } from 'vue';

// 获取组件实例
const instance = getCurrentInstance();

// 访问全局属性
const hello1 = instance.appContext.config.globalProperties.$Hello;
//（proxy 是组件实例的代理，包含全局属性）
const hello2=instance.proxy.$Hello

console.log(hello1); // 输出：Hello vue3
console.log(hello2); // 输出：Hello vue3
</script>

使用 provide/inject（推荐）

如果属性需要在多个组件中共享，provide/inject 是更符合 Vue 3 设计理念的方案，尤其适合跨层级传递。

全局 provide（在入口文件中）

javascript 复制代码

import { createSSRApp } from 'vue';
export function createApp() {
  const app = createSSRApp(App);
  // 全局提供属性
  app.provide('helloKey', 'Hello vue3（from provide）'); 
  return {
    app
  };
}

在组合式 API 中 inject 使用

javascript 复制代码

<script setup>
import { inject } from 'vue';

// 注入全局提供的属性（通过 key 匹配）
const hello = inject('helloKey'); 

console.log(hello); // 输出：Hello vue3（from provide）
</script>