Comment définir des variables globales dans vue3

vue3 définit des variables globales

Dans vue2, nous savons que vue2.x utilise Vue.prototype.$xxxx=xxx pour définir des variables globales, puis obtient des variables globales via this.$xxx .

Mais dans vue3, cette méthode ne fonctionne évidemment pas. Parce que nous ne pouvons pas obtenir cela dans la configuration de vue3, donc selon la documentation officielle, nous utilisons la méthode suivante pour définir les variables globales :

Écrivez d'abord une variable globale que nous voulons définir dans main.js, par exemple , un identifiant système

app.config.globalProperties.$systemId = "10"

Vous devez maintenant utiliser cette variable dans la page. Il vous suffit d'introduire getCurrentInstance depuis vue. Notez que vous ne pouvez pas l'utiliser dans la page.

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10

#🎜. 🎜# Utilisation des variables globales vue3 app.config.globalProperties

globalProperties

• Type : [clé : chaîne] : any

  #🎜 🎜#

Par défaut : non défini
Usage
Ajouter un in Une propriété globale accessible depuis n'importe quelle instance de composant de l'application. Les propriétés des composants sont prioritaires dans les conflits de noms.

Cela peut remplacer l'extension Vue.prototype Vue 2.x :

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

Lorsque nous voulons appeler http dans le composant, nous devons utiliser getCurrentInstance() pour l'obtenir .

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance représente le contexte, c'est-à-dire l'instance actuelle. ctx est équivalent à celui de Vue2, mais il est important de noter que ctx au lieu de cela ne convient qu'à la phase de développement. Si le projet est packagé et exécuté sur le serveur de production, une erreur se produira. montage d'objets. La solution à ce problème consiste à utiliser un proxy au lieu de ctx. La référence du code est la suivante.

import { getCurrentInstance } from 'vue'
export default ({
  name: '',
  setup(){
    const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
    onMounted(() => {
      console.log(proxy, "proxy");
      proxy.http();
    });
  }
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!