当前位置：首页 > news >正文

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

news 2025/10/22 11:49:10

简介

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

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

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

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

使用 app.config.globalProperties + getCurrentInstance

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

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

在组合式 API 中使用

<script setup>
import { getCurrentInstance } from 'vue';// 获取组件实例
const instance = getCurrentInstance();// 访问全局属性
const hello1 = instance.appContext.config.globalProperties.$Hello;
//（proxy 是组件实例的代理，包含全局属性）
const hello2=instance.proxy.$Helloconsole.log(hello1); // 输出：Hello vue3
console.log(hello2); // 输出：Hello vue3
</script>

使用 provide/inject（推荐）

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

全局 provide（在入口文件中）

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

在组合式 API 中 inject 使用

<script setup>
import { inject } from 'vue';// 注入全局提供的属性（通过 key 匹配）
const hello = inject('helloKey'); console.log(hello); // 输出：Hello vue3（from provide）
</script>