在使用 Vue.js 开发项目时，经常需要在多个组件中使用同一个全局变量。如果每个组件中都进行一次变量定义会令代码变得冗余而难以维护。此时，我们需要一种优雅的方式来注入全局变量。
方式一：通过 Vue.prototype
Vue.js 提供了 Vue.prototype 属性，可以将变量挂载到 Vue 实例上，从而实现全局注入。下面是示例代码：
Vue.prototype.$myGlobalVar = 'Hello World!';
在任何组件中，都可以通过 this.$myGlobalVar 读写全局变量。
这种方式简单易行，但不够优雅，也不够安全，因为所有组件都可以随意修改 Vue.prototype 上的变量，容易导致命名冲突和意外覆盖。
方式二：通过 Mixin
Mixin 是一种组件之间代码复用的技术，它可以将多个组件共同的逻辑封装为一个 Mixin 对象，并注入到组件中。如果将全局变量定义在 Mixin 中，就可以实现全局注入。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------------- - -
----- -------- -- -
------ -
------------ ------ -------
-
-
-
-------------------------这种方式优雅而且安全，因为只有显式混合了该 Mixin 的组件才能访问该全局变量。但需要注意的是，如果多个 Mixin 定义了同样的变量，会出现命名冲突。
方式三：通过插件
插件是一种可重用的组件或逻辑模块，它通过 Vue 提供的 Vue.use() 方法来安装并注入到 Vue 实例中。如果将全局变量定义在插件中，就可以实现全局注入。
下面是一个示例代码：
const myGlobalPlugin = {
install: function (Vue, options) {
Vue.prototype.$myGlobalVar = 'Hello World!';
}
}
Vue.use(myGlobalPlugin);这种方式优雅、安全、可扩展，因为插件可以引入其他依赖和配置，并可以多次实例化。但需要注意的是，插件中不能定义和 Vue.js 内置对象相同的变量。
总结
在 Vue.js 中，注入全局变量的方式有多种，选择合适的方式取决于项目需求和开发者的偏好。需要注意的是，无论采用哪种方式，都应该避免全局污染和命名冲突，并且要在组件生命周期中清理全局变量，避免内存泄漏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649403ff48841e9894190416