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

Question

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

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

Vue.prototype.$myGlobalVariable = globalVariable

Answer 1

我建议使用 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')

Answer 2

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

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

所以：

Vue.prototype.$myGlobalVariable = globalVariable

变为：

const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable

请注意，这是针对特定应用程序的范围，而不是像 Vue.prototype 那样是全局的。这是设计使然，所有全局配置选项现在都限定在一个应用程序范围内。

相关的 RFC 在这里：

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

请注意，应用程序级别 provide/inject（也在该 RFC 中讨论）也是使用 Vue.prototype:

的替代方法

const app = Vue.createApp({})

app.provide('myGlobalVariable', globalVariable)

// In the descendant component
export default {
  inject: ['myGlobalVariable']
}

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

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

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

Answer 3

对于那些对如何在 setup() 方法中访问 globalProperties 感到困惑的人，您可以使用 getCurrentInstance()，如以下文档所示。

https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

Answer 4

如果可能，您应该使用导入或 provide/inject。定义 global variables/functions 并使用它们的另一种方法是使用 globalProperties（尽管这似乎更像是一种反模式）。但是，如果您使用的库使用了 globalProperties，那么您可以像这样使用它。这也适用于全局函数。

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} // global function
app.config.globalProperties.$globalVariable = 'Jimmy' // global variable

1.使用选项 API

mounted() {
  console.log(this.$globalVariable)
}

2。使用设置方法

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const progressBar = app.appContext.config.globalProperties.$globalVariable

    console.log(this.$globalVariable)
</script>

Answer 5

如何使用 Vue 3 和 vue-cli（或 Vite）添加全局变量

注意： 你可以去掉 $globalVariable 中的美元符号，只使用 globalVariable，就像 in the documentation.

最初您的 main.js 文件看起来像这样（为常见用例添加路由器）：

import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')

要使用添加全局变量 使用 Vue 3 和 vue-cli 或 Vite:

import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'

// 1. Assign app to a variable
let app = createApp(App)

// 2. Assign the global variable before mounting
app.config.globalProperties.globalVar = 'globalVar'

// 3. Use router and mount app
app.use(router).mount('#app')

然后像这样访问组件中的变量：

<script>
export default {
    data() {
        return {
            myVar: this.globalVar
        }
    }
}
</script>

像这样在模板中：

<template>
  <h1>{{ globalVar }}</h1>
</template>

就是这样。编码愉快！

关于全局变量和组合API

根据 samayo's answer on this post 的 very 底部，全局变量仅在选项 API.

上可用

引用他回答的底部：

Note: This is only for the Options API. Evan You (Vue creator) says: "config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app.

Answer 6

在我的例子中，我必须创建一个全局变量并从脚本中获取数据。
使用提供和注入：

在main.js中：

    import { createApp } from 'vue'
    import App from './App.vue'
    const app = createApp(App);
    app.provide('message',document.querySelector('script[name="nameSCRIPT"]').innerHTML.split('=').slice(1).join('=').slice(1,-1));
    app.mount('#app')

在index.html中：

 <script name="nameSCRIPT">nameSCRIPT="HELLO"</script>

在子组件中：

    inject:['message'],
    mounted(){
    console.log(this.message)
  },

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

Add global variable in Vue.js 3

javascript

vue.js

vue-component

vuejs3

vue-script-setup

如何使用 Vue 3 和 vue-cli（或 Vite）添加全局变量

关于全局变量和组合API