在 Vue.js 3 中添加全局变量

Question

有人知道如何在 Vue 3 中添加全局变量吗？

在 Vue 2 中，我们在 main.js 文件中使用它：

 Vue.prototype.$myGlobalVariable = globalVariable

原文由 Adri HM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最直接的替换是 app.config.globalProperties 。看：

https://vuejs.org/api/application.html#app-config-globalproperties

所以：

 Vue.prototype.$myGlobalVariable = globalVariable

变成：

 const app = createApp(RootComponent)
app.config.globalProperties.$myGlobalVariable = globalVariable

这仅限于特定应用程序，而不是像 Vue.prototype 那样是全局的。这是设计使然，所有“全局”配置选项现在都适用于应用程序。

相关的 RFC 在这里：

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

添加到 globalProperties 的属性将通过应用程序中所有组件的组件实例可用。因此，如果您使用 Options API，您将能够使用 this.$myGlobalVariable Vue.prototype 。它们也可以在没有 this. 的模板中使用，例如 {{ $myGlobalVariable }} 。

如果您使用的是 Composition API，那么您仍然可以在模板中使用这些属性，但您将无法访问 setup 中的组件实例，因此这些属性不会是那里可以访问。

虽然涉及 getCurrentInstance() 的黑客可用于访问 globalProperties 内的 setup ，但这些黑客涉及使用未记录的 API，因此不是推荐的方法。

相反，应用程序级别的 provide / inject （也在该 RFC 中讨论过）可以用作 Vue.prototype 的替代方案：

 const app = createApp(RootComponent)
app.provide('myGlobalVariable', globalVariable)

在后代组件中，可以使用 inject 访问它。例如 <script setup> ：

 <script setup>
import { inject } from 'vue'
const myGlobalVariable = inject('myGlobalVariable')
</script>

或者使用明确的 setup 函数：

 import { inject } from 'vue'

export default {
  setup() {
    const myGlobalVariable = inject('myGlobalVariable')

    // Expose it to the template, if required
    return {
      myGlobalVariable
    }
  }
}

或者使用选项 API：

 export default {
  inject: ['myGlobalVariable']
}

文档： https ://vuejs.org/api/application.html#app-provide

这里的想法是组件可以显式声明属性，而不是通过魔法继承它。这样可以避免名称冲突等问题，因此无需使用 $ 前缀。它还可以帮助更清楚地了解财产的确切来源。

inject 函数通常被包装在一个组合中。例如，Vue Router 暴露的 useRoute 可组合只是 inject 的包装。

In addition to globalProperties and provide / inject , there are various other techniques that might be used to solve the same problems as Vue.prototype .例如，ES 模块、存储，甚至是全局 mixin。这些不一定是对此处发布的特定问题的直接答案，但我已经更详细地描述了各种方法：

https://skirtles-code.github.io/vue-examples/patterns/global-properties.html

您喜欢哪种方法取决于您的情况。

原文由 skirtle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我建议使用 provide/inject 方法如下：

在 main.js 中：

 import {createApp} from 'vue'

let app=createApp({
  provide:{
    globalVariable:123
  }

}).$mount('#app')

在某些子组件或孙子组件中：

 export default{
 name:'some-compo',
 inject:['globalVariable'],
 //then access this.globalVariable as property in you component
...
}

对于组合 api 和脚本设置：

  import { inject } from 'vue'

 let globalVar=inject('globalVariable')

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议