Vue3项目开发中全局变量到底怎么用才安全又高效？

terry 9小时前阅读数 141 #Vue

刚上手Vue3的同学可能会直接说“挂window上不就完了？”但写过大型项目的人肯定知道，window上随便挂变量就像在公共走廊乱扔东西，回头要么找不到，要么踩雷——组件卸载了变量还留着、多个第三方库重名了变量直接被覆盖、调试的时候完全不知道这玩意儿是谁改的，那Vue3官方有没有给靠谱的全局变量方案？不同场景该选哪种？有没有安全高效的封装技巧？今天咱们就把这些问题掰扯清楚。

Vue3官方推荐的全局变量核心方案有哪些？别只知道provide/inject入门版

很多Vue3教程一上来就讲provide/inject，但很多人把它当成“基础祖孙传参”工具，其实它才是官方最推荐、自由度最高的全局状态/变量载体？不对，状态和变量还要区分，不过先讲核心方案,再细分场景。

App.config.globalProperties

这个方案和Vue2的Vue.prototype.$xxx简直是双胞胎，适合挂载工具函数、静态配置、Vue插件实例的快捷访问属性这些“全局只读或有安全修改边界”的东西，它的好处是不用到处import，在所有组件的setup里可以通过getCurrentInstance().proxy拿到，在模板里直接用就行，但坏处也明显：不能和Vue3的响应式系统深度绑定，如果挂的是普通对象，修改里面的属性组件不会自动更新；而且组件里用getCurrentInstance()拿到的proxy是开发环境特有的代理吗？不，生产环境也有，但官方文档明确说了：“在生产环境中，proxy 会是组件实例本身，而在开发环境中，Vue 会为其包裹一层代理以支持对实例内部属性的访问警告。”不过更重要的是，它违反了Vue3“组合式函数优先、显式依赖优先”的理念——组件里用了globalProperties的东西，不翻代码根本不知道依赖了什么全局变量,不利于维护。

组合式函数封装静态或简单响应式变量

如果你的全局变量不需要跨多组件频繁修改，或者修改逻辑很简单（比如只在登录后存用户ID、主题色这种小数据），可以用组合式函数封装，比如单独建一个src/utils/useGlobalConfig.js文件，把静态配置写在函数外面的模块作用域里，响应式数据用ref/reactive包起来，然后导出函数，在需要的组件里import调用，模块作用域在ES6里是单例的，所以不管在多少个组件里import，拿到的都是同一个ref/reactive实例，这样就实现了“全局共享、显式依赖、响应式更新”，完美避开globalProperties的缺点，而且封装性好，想加个修改校验、本地存储同步之类的逻辑，直接在这个文件里加就行,不用改其他组件。

provide/inject的“全局增强版”（根组件provide + 封装useInject）

provide/inject入门版可能是在App.vue里用provide，在深层组件里用inject，但有个问题：深层组件inject的时候如果没写默认值，万一App.vue漏了provide，或者开发环境顺序不对，就会报错undefined；而且每次inject都要写一堆变量名，也麻烦，所以推荐的做法是：根组件App.vue的setup里用provide把全局数据（或者封装好的响应式模块）全传出去，然后单独建一个src/composables/useGlobalInject.js文件，把inject的逻辑封装成多个小的组合式函数，比如useUserInfo()、useTheme()，这样组件里只需要import对应的小函数，就能拿到全局数据，而且可以在封装的函数里加默认值、加错误提示、加访问权限控制（比如只有登录后的组件才能用useUserInfo()拿到完整数据），安全性和可维护性都拉满，这里的provide/inject其实可以看成“Vue3轻量级的全局状态管理”，如果你的项目不需要复杂的跨模块状态同步（比如电商网站的购物车、社交平台的消息通知队列），完全可以用它代替Pinia或者Vuex,减少依赖包的体积。

不同全局变量场景的具体选择逻辑是什么？别瞎套方案

刚才讲了三个核心方案，现在给大家分场景说清楚怎么选,保证你们看完不会再纠结。

场景1：挂载工具函数、第三方库的快捷访问属性

选App.config.globalProperties，比如你要全局用lodash的防抖节流函数、dayjs的日期格式化函数、echarts的实例创建函数，可以这样做：先在main.js里引入这些库，然后挂到globalProperties上，比如app.config.globalProperties.$dayjs = dayjs，app.config.globalProperties.$echarts = echarts，在模板里直接用{{ $dayjs().format('YYYY-MM-DD') }}，在setup里用const { proxy } = getCurrentInstance(); proxy.$dayjs()，不过这里要注意，getCurrentInstance()只能在setup或者生命周期钩子函数里用，不能在异步回调里用（比如setTimeout、axios的then里），如果要在异步回调里用，最好在setup里先把proxy赋值给一个局部变量，比如const instance = getCurrentInstance(); const dayjs = instance?.proxy?.$dayjs; 然后再在异步回调里用dayjs。

场景2：小范围全局响应式数据（比如主题色、用户基础ID）

选组合式函数封装，比如单独建一个src/composables/useTheme.js文件：

import { ref, watch } from 'vue';
// 模块作用域里的单例响应式变量
const currentTheme = ref(localStorage.getItem('theme') || 'light');
// 本地存储同步逻辑
watch(currentTheme, (newVal) => {
  localStorage.setItem('theme', newVal);
  document.documentElement.setAttribute('data-theme', newVal);
});
// 切换主题的函数
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
};
// 导出组合式函数，只暴露需要的东西，内部变量不暴露，封装性好
export default function useTheme() {
  return {
    currentTheme,
    toggleTheme
  };
}

然后在App.vue里初始化主题（watch其实已经初始化了，但手动加一遍更保险），在其他组件里直接import useTheme from '@/composables/useTheme'; const { currentTheme, toggleTheme } = useTheme(); 就行，这种方案的好处是：显式依赖，组件里一看import就知道用了主题相关的全局数据；响应式更新，修改currentTheme.value所有用它的组件都会自动更新；本地存储同步逻辑封装在同一个文件里，维护起来很方便；没有引入额外的依赖包,体积小。

场景3：中大型项目的全局状态管理（比如购物车、权限控制、消息通知）

选Pinia（如果一定要用Vuex也可以，但Pinia是Vue3官方推荐的状态管理库，比Vuex4更简洁、更符合组合式函数的理念），这里可能有人会问：“刚才不是说provide/inject可以当轻量级状态管理吗？为什么还要用Pinia？”因为provide/inject虽然好用,但没有以下几个Pinia的核心功能：

DevTools支持：Pinia可以和Vue DevTools完美配合，你可以在DevTools里看到所有状态的变化历史、修改来源、时间线,调试起来超级方便。
模块化：Pinia可以把不同的全局状态拆分成不同的模块（比如user模块、cart模块、notification模块），每个模块有自己的state、getters、actions，代码结构更清晰,维护起来更方便。
类型安全：如果你用TypeScript开发，Pinia的类型支持非常完善，几乎不需要写额外的类型声明就能获得完整的类型提示，而provide/inject需要自己写类型声明,比较麻烦。
插件生态：Pinia有很多官方和第三方插件，比如pinia-plugin-persistedstate（自动同步本地存储）、pinia-plugin-undo-redo（撤销重做）、pinia-plugin-subscribe（状态变化订阅）,可以大大提高开发效率。

用这些方案时有没有安全高效的封装技巧？帮你踩过坑的经验总结

刚才讲了方案和场景，现在给大家分享几个我自己踩过坑后总结的封装技巧，保证你们用起来更安全、更高效。

技巧1：用Symbol作为provide/inject的key，避免变量名冲突

provide/inject入门版可能会用字符串作为key，app-config'、'user-info'，但如果你的项目引入了第三方库，第三方库也用了同样的字符串作为provide/inject的key，就会出现变量名冲突的问题，所以推荐的做法是：单独建一个src/constants/injectKeys.js文件，用Symbol作为所有provide/inject的key，

export const INJECT_KEY_THEME = Symbol('theme');
export const INJECT_KEY_USER_INFO = Symbol('user-info');
export const INJECT_KEY_GLOBAL_CONFIG = Symbol('global-config');

然后在App.vue里用这些Symbol作为key provide数据，在封装的useGlobalInject.js文件里用这些Symbol作为key inject数据,这样就完全避免了变量名冲突的问题。

技巧2：给globalProperties的属性加前缀，避免和组件自身的属性冲突

Vue2的Vue.prototype.$xxx加了$前缀，就是为了避免和组件自身的data、props、computed属性冲突，Vue3的globalProperties也一样，最好加个$或者_前缀，dayjs、_userInfo（前缀一般用于组件内部的私有属性，所以推荐用$前缀）。

技巧3：给组合式函数封装的全局数据加访问限制，避免随意修改

刚才讲的组合式函数封装主题色的例子里，我们直接暴露了currentTheme这个ref实例，虽然可以直接修改value，但如果有多个组件随意修改，调试起来就会很麻烦，所以推荐的做法是：只暴露响应式数据的只读版本（用readonly()包起来），只暴露封装好的修改函数（比如toggleTheme()、updateUserInfo()），这样所有的修改都必须通过封装好的函数，修改逻辑可以统一控制，比如加校验、加日志、加权限控制，比如刚才的useTheme.js可以改成：

import { ref, watch, readonly } from 'vue';
// 模块作用域里的单例响应式变量，不直接暴露
const _currentTheme = ref(localStorage.getItem('theme') || 'light');
// 本地存储同步逻辑
watch(_currentTheme, (newVal) => {
  localStorage.setItem('theme', newVal);
  document.documentElement.setAttribute('data-theme', newVal);
});
// 切换主题的函数，暴露给外部
const toggleTheme = () => {
  _currentTheme.value = _currentTheme.value === 'light' ? 'dark' : 'light';
};
// 初始化主题的函数，暴露给外部（比如在登录后根据用户的偏好设置主题）
const setTheme = (theme) => {
  if (['light', 'dark', 'auto'].includes(theme)) {
    _currentTheme.value = theme;
  } else {
    console.warn(`Invalid theme: ${theme}, must be one of light, dark, auto`);
  }
};
// 导出组合式函数，只暴露只读的响应式数据和封装好的修改函数
export default function useTheme() {
  return {
    currentTheme: readonly(_currentTheme),
    toggleTheme,
    setTheme
  };
}

这样外部组件就不能直接修改_currentTheme.value了，只能通过toggleTheme()或者setTheme()修改,安全性大大提高。

技巧4：用pinia-plugin-persistedstate自动同步Pinia的状态到本地存储

如果你用Pinia做状态管理，一定遇到过刷新页面后状态丢失的问题，手动写watch同步本地存储又很麻烦，这时候可以用pinia-plugin-persistedstate插件，使用方法很简单：先安装插件，然后在main.js里引入并注册,然后在需要同步本地存储的Pinia模块里加persist配置就行。

// src/stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: null
  }),
  getters: {
    isLoggedIn: (state) => !!state.token
  },
  actions: {
    login(userInfo, token) {
      this.userInfo = userInfo;
      this.token = token;
    },
    logout() {
      this.userInfo = null;
      this.token = null;
    }
  },
  // 自动同步本地存储的配置
  persist: {
    key: 'vue3-user-store', // 本地存储的key
    storage: localStorage, // 存储方式（localStorage/sessionStorage）
    paths: ['userInfo', 'token'] // 只同步这两个属性，不同步其他属性（如果有的话）
  }
});

这样刷新页面后，userInfo和token会自动从本地存储里恢复，不需要手动写任何代码,超级方便。

Vue3全局变量的最佳实践是什么？

最后给大家总结一下Vue3全局变量的最佳实践：

优先选择显式依赖的方案：组合式函数封装、Pinia、provide/inject的全局增强版，尽量不要用App.config.globalProperties，除非是挂载工具函数、第三方库的快捷访问属性这些“全局只读或有安全修改边界”的东西。
根据场景选择合适的方案：小范围全局响应式数据用组合式函数封装，中大型项目的全局状态管理用Pinia，需要跨多组件深层传递但不需要复杂状态管理的用provide/inject的全局增强版。
注意安全封装：用Symbol作为provide/inject的key，给globalProperties的属性加前缀，给组合式函数封装的全局数据加访问限制，用pinia-plugin-persistedstate自动同步Pinia的状态到本地存储。

希望这篇文章能帮你们解决Vue3全局变量的所有问题，如果还有其他问题,欢迎在评论区留言讨论。