Ajouter une variable globale dans Vue.js 3

Je recommande d'utiliser l'approche provide/inject comme suit:

dans main.js:

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

dans un composant enfant ou petit-enfant:

let app=new Vue({
provide:{
globalVariable:123
}

}).$mount('#app')

Le remplacement le plus direct est app.config.globalProperties . Voir:

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

Donc:

const app = Vue.createApp({})

app.provide('myGlobalVariable', globalVariable)

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

devient:

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

Notez que cela concerne une application particulière plutôt que d'être global comme c'était le cas avec Vue.prototype . C'est par conception, toutes les options de configuration globales sont désormais étendues à une application.

Le RFC pertinent est ici:

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

Notez que provide / inject niveau de l'application (également abordé dans cette RFC) est également une alternative à l'utilisation de Vue.prototype :

Vue.prototype.$myGlobalVariable = globalVariable

Documents: https://v3.vuejs.org/api/application-api.html#provide

L'idée ici est que le composant peut déclarer explicitement la propriété plutôt que de l'hériter par magie. Cela évite les problèmes tels que les collisions de noms, il n'est donc pas nécessaire d'utiliser un préfixe $ . Cela peut également aider à préciser d'où vient exactement une propriété.

L'approche que vous préférez dépendra de votre situation.

Pour ceux d'entre vous qui ne globalProperties pas comment accéder à globalProperties dans la méthode setup() , vous pouvez utiliser getCurrentInstance() comme dans la documentation suivante.

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