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

Question

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

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

Vue.prototype.$myGlobalVariable = globalVariable

Answer 1

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

注意：您可以删除您的美元符号$globalVariable并只使用，就像文档中globalVariable一样。

最初，您的 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 在这篇文章中的回答的最底部，全局变量仅在选项 API 上可用。

引用他的答案的底部：

注意：这仅适用于选项 API。Evan You（Vue 创建者）说：“config.globalProperties 是用于复制 Vue.prototype 行为的逃生舱口。在设置函数中，只需导入您需要的内容或显式使用提供/注入来向应用程序公开属性。

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

如果可能，您应该使用导入或提供/注入。定义全局变量/函数并使用它们的另一种方法是使用 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 4

我建议使用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
...
}

Answer 5

对方法中如何访问感到困惑globalProperties的小setup()伙伴，可以getCurrentInstance()参考以下文档中的方法使用。

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

Answer 6

视图3：

import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

“proxy”将包含 globalProperties 的值。例如：

app.config.globalProperties.$toast = {...}

进而：

proxy.$toast.success()