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

pbwdgjma  于 2023-03-24  发布在  Vue.js
关注(0)|答案(7)|浏览(245)

有人知道如何在Vue 3中添加全局变量吗?
在Vue 2中,我们在main.js文件中使用:

Vue.prototype.$myGlobalVariable = globalVariable
thtygnil

thtygnil1#

最直接的替换是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()的黑客可以用于访问setup中的globalProperties,但这些黑客涉及使用未记录的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函数通常被 Package 在一个composable中。例如,Vue Router公开的useRoute composable只是inject的 Package 器。
除了globalPropertiesprovide/inject之外,还有各种其他技术可以用来解决与Vue.prototype相同的问题。例如,ES模块,存储,甚至全局mixin。这些不一定是这里发布的特定问题的直接答案,但我已经详细描述了各种方法:
https://skirtles-code.github.io/vue-examples/patterns/global-properties.html
你喜欢哪种方法取决于你的情况。

byqmnocz

byqmnocz2#

如何使用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-cliVite添加全局变量

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 postvery bottom,全局变量仅在Options API上可用。
引用他的答案的底部:
注意:这仅适用于Options API。Evan You(Vue创建者)说:“config.globalProperties是复制Vue. prototype行为的转义。在安装函数中,只需导入所需内容或显式使用provide/inject向应用程序公开属性。

h79rfbju

h79rfbju3#

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

xxhby3vn4#

如果可能的话,你应该使用import或provide/inject。另一种定义全局变量/函数并使用它们的方法是使用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>
llew8vvj

llew8vvj5#

对于那些对如何在setup()方法中访问globalProperties感到困惑的人,可以按照下面的文档使用getCurrentInstance()
https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

rdrgkggo

rdrgkggo6#

在我的例子中,我必须创建一个全局变量并从脚本中获取数据。
使用的提供和注入:
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)
  },
x8diyxa7

x8diyxa77#

window.myGlobal =“这很简单”;

相关问题