首页
/ 正文

vue3 全局变量（超详细）

更新时间: 2025-03-18 13:40:22

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在前端开发中，全局变量是一个重要的概念。它允许开发者在应用的不同组件或模块之间共享数据和状态，从而提升代码的复用性和维护性。Vue 3 作为现代前端框架的代表，提供了多种实现全局变量的方法，这些方法既延续了 Vue 2 的设计理念，又引入了更灵活的组合式 API。本文将深入探讨 Vue 3 中全局变量的实现方式、适用场景以及最佳实践，帮助开发者选择最适合的方案。

全局变量的定义与作用

全局变量是指在程序运行期间，可以在多个函数、模块或组件之间共享的数据。在 Vue 应用中，全局变量通常用于存储需要被多个组件访问的状态，例如用户登录信息、主题配置或全局的 API 配置。其核心作用是：

数据共享：避免在组件间频繁传递数据，减少代码冗余；
状态管理：集中管理应用的核心状态，便于调试和维护；
解耦组件：降低组件之间的直接依赖，提升代码的可扩展性。

比喻：可以将全局变量想象为一座“中继站”，它将分散的数据流汇聚到一个中心点，再分发到需要的地方，从而让整个系统运行得更高效。

Vue 2 中的全局变量实现方法

在 Vue 2 中，开发者通常通过以下方式实现全局变量：

Vue 实例的 data 属性：通过 new Vue() 实例的 data 属性定义全局变量；
Vue.prototype：将变量挂载到 Vue 的原型链上，使其在所有组件中可用；
Vuex 状态管理库：通过集中式状态树管理复杂应用的状态。

代码示例（Vue 2 的 Vue.prototype 方法）：

// main.js  
Vue.prototype.$globalVar = "这是一个全局变量";

在组件中可以直接通过 this.$globalVar 访问。但这种方式存在一些问题，例如：

可能与第三方库或组件的属性冲突；
难以管理复杂的状态逻辑；
不符合 Vue 3 的响应式系统设计。

Vue 3 的全局变量实现方式

Vue 3 引入了更现代化的 API 和响应式系统，提供了以下几种实现全局变量的方法：

方法一：通过 `provide` 和 `inject`

Vue 3 的 provide 和 inject 是父子组件间共享数据的经典方案，适用于简单的状态传递。

核心原理：

provide：父组件通过 provide 方法将数据暴露给后代组件；
inject：子组件通过 inject 方法接收父组件提供的数据。

代码示例：

<!-- 父组件 ParentComponent.vue -->  
<template>  
  <ChildComponent />  
</template>  

<script setup>  
import { ref } from "vue";  
const globalMessage = ref("来自父组件的全局消息");  
provide("message", globalMessage);  
</script>  

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <p>{{ message }}</p>  
</template>  

<script setup>  
import { inject } from "vue";  
const message = inject("message");  
</script>

优势：

父子组件间数据传递清晰，无需通过中间层；
支持响应式更新，数据变化会自动触发视图更新。

局限性：

仅适用于组件树的直接父子关系，跨层级或非直接子组件需要多次传递；
不适合管理复杂的状态逻辑。

方法二：使用组合式 API 的 `inject` 和 `provide`

Vue 3 的组合式 API 提供了更灵活的 provide 和 inject 实现方式，尤其适合需要跨层级共享数据的场景。

代码示例：

// main.js  
import { createApp } from "vue";  
import App from "./App.vue";  

const app = createApp(App);  

// 定义全局变量  
const globalState = {  
  theme: "light",  
  toggleTheme: () => { /* 切换主题的逻辑 */ },  
};  

// 通过 app.config.globalProperties 提供全局变量  
app.provide("globalState", globalState);  
app.mount("#app");

在任意组件中通过 inject 使用：

<script setup>  
import { inject } from "vue";  
const globalState = inject("globalState");  
</script>

优势：

可以在应用启动时集中定义全局变量；
支持复杂对象或函数的传递。

方法三：Pinia 状态管理库

对于复杂应用，推荐使用 Pinia（Vue 3 的官方状态管理库）。它通过集中式存储和模块化设计，提供高效的状态管理方案。

核心步骤：

安装 Pinia：
```
npm install pinia  
```

创建 Store：

// stores/globalStore.js  
import { defineStore } from "pinia";  

export const useGlobalStore = defineStore("global", {  
  state: () => ({  
    user: null,  
    theme: "light",  
  }),  
  actions: {  
    updateUser(newUser) {  
      this.user = newUser;  
    },  
  },  
});

在组件中使用：

<script setup>  
import { useGlobalStore } from "@/stores/globalStore";  

const globalStore = useGlobalStore();  
const user = globalStore.user;  
</script>

优势：

支持响应式状态和复杂逻辑；
提供 DevTools 支持，方便调试；
模块化设计，易于维护。

适用场景：

需要管理用户登录状态、购物车数据等复杂状态的应用。

方法四：通过 `app.config.globalProperties`

Vue 3 的 app.config.globalProperties 可以将变量挂载到应用实例上，类似 Vue 2 的 Vue.prototype，但更符合 Vue 3 的设计规范。

代码示例：

// main.js  
import { createApp } from "vue";  
import App from "./App.vue";  

const app = createApp(App);  

// 挂载全局变量  
app.config.globalProperties.$globalVar = "这是一个全局变量";  

app.mount("#app");

在组件中通过 this.$globalVar 访问。但需注意：

不推荐在组合式 API 中使用，因为 this 在 <script setup> 中不可用；
应优先使用响应式方案，如 provide 或 Pinia。

全局变量的实现对比与选择建议

以下表格对比了不同方法的优缺点，帮助开发者根据需求选择合适的方案：

方法	响应式支持	适用场景	复杂度	跨组件层级能力
`provide/inject`	是	简单状态传递	低	父子组件层级
组合式 API 的 `provide`	是	应用级全局状态	中	全局
Pinia	是	复杂状态管理	高	全局
`globalProperties`	否（需手动处理）	非响应式数据共享	低	全局

实际案例：用户登录状态管理

假设需要在 Vue 3 应用中管理用户登录状态，要求：

多个组件能访问用户的登录信息；
登录状态变化时自动更新所有关联组件。

解决方案：使用 Pinia：

// stores/userStore.js  
import { defineStore } from "pinia";  

export const useUserStore = defineStore("user", {  
  state: () => ({  
    isLoggedIn: false,  
    userInfo: null,  
  }),  
  actions: {  
    login(userData) {  
      this.isLoggedIn = true;  
      this.userInfo = userData;  
    },  
    logout() {  
      this.isLoggedIn = false;  
      this.userInfo = null;  
    },  
  },  
});

在登录组件中调用登录方法：

<script setup>  
import { useUserStore } from "@/stores/userStore";  

const userStore = useUserStore();  

const handleLogin = (userData) => {  
  userStore.login(userData);  
};  
</script>

在导航栏组件中显示用户信息：

<script setup>  
import { useUserStore } from "@/stores/userStore";  

const userStore = useUserStore();  
</script>  

<template>  
  <div v-if="userStore.isLoggedIn">  
    欢迎，{{ userStore.userInfo.username }}  
  </div>  
</template>

最佳实践与注意事项

避免滥用全局变量：过多的全局变量可能导致代码难以维护，需明确哪些数据需要全局共享；
优先选择响应式方案：如 provide/inject 或 Pinia，以确保数据变化时视图自动更新；
Pinia 适用于复杂场景：当状态逻辑复杂或需要持久化时，推荐使用 Pinia；
合理划分 Store 模块：将不同功能的状态拆分为独立的 Store，避免单个 Store 过于臃肿。

结论

Vue 3 提供了多种实现全局变量的方法，开发者需要根据具体需求选择最合适的方案。对于简单场景，provide/inject 可快速实现父子组件间的状态共享；对于复杂应用，Pinia 的模块化设计和响应式特性则更具优势。通过合理规划全局变量的使用，开发者可以显著提升代码的可维护性和扩展性。

希望本文能帮助开发者在 Vue 3 中高效管理全局变量，构建更健壮的前端应用！

vue3 全局变量（超详细）

全局变量的定义与作用

Vue 2 中的全局变量实现方法

Vue 3 的全局变量实现方式

方法一：通过 `provide` 和 `inject`

方法二：使用组合式 API 的 `inject` 和 `provide`

方法三：Pinia 状态管理库

方法四：通过 `app.config.globalProperties`

全局变量的实现对比与选择建议

实际案例：用户登录状态管理

最佳实践与注意事项

结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

vue3 全局变量（超详细）

全局变量的定义与作用

Vue 2 中的全局变量实现方法

Vue 3 的全局变量实现方式

方法一：通过 provide 和 inject

方法二：使用组合式 API 的 inject 和 provide

方法三：Pinia 状态管理库

方法四：通过 app.config.globalProperties

全局变量的实现对比与选择建议

实际案例：用户登录状态管理

最佳实践与注意事项

结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

方法一：通过 `provide` 和 `inject`

方法二：使用组合式 API 的 `inject` 和 `provide`

方法四：通过 `app.config.globalProperties`