Ajouter une variable globale dans VUE.JS 3

Question

Quelqu'un sait comment faire une variable globale de Vue 3?

iN Vue 2 Nous l'utilisons dans le main.js fichier:

Vue.prototype.$myGlobalVariable = globalVariable

Answer 1

Pour ceux d'entre vous qui sont confondus sur la manière d'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

Answer 2

Si possible, vous devez utiliser les importations ou fournir/injecter. Une autre façon de définir des variables/fonctions globales et les utiliser serait d'utiliser globalproperties (bien que cela semble être considéré plus d'un anti-motif). Mais si une bibliothèque que vous utilisez utilise globalproperties, vous pouvez l'utiliser comme ceci. Cela fonctionne également avec des fonctions globales.

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

1. Utilisation des options API

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

2. Utilisation de la méthode de configuration

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

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

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