So definieren Sie globale Variablen in vue3

vue3 definiert globale Variablen

In vue2 wissen wir, dass vue2.x Vue.prototype.$xxxx=xxx verwendet, um globale Variablen zu definieren, und dann globale Variablen dadurch erhält.$xxx .

Aber in vue3 funktioniert diese Methode offensichtlich nicht. Da wir dies nicht in vue3 einrichten können, verwenden wir gemäß der offiziellen Dokumentation die folgende Methode, um globale Variablen zu definieren:

Schreiben Sie zunächst eine globale Variable, die wir beispielsweise in main.js definieren möchten , eine System-ID

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

Jetzt müssen Sie diese Variable auf der Seite verwenden. Sie müssen nur getCurrentInstance von vue einführen.

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

#🎜 🎜# Verwendung globaler vue3-Variablen app.config.globalProperties

globalProperties

• Typ: [Schlüssel: Zeichenfolge]: beliebig

  #🎜 🎜#

Standard: undefiniert
Verwendung
Eins hinzufügen in Eine globale Eigenschaft, auf die von jeder Komponenteninstanz der Anwendung aus zugegriffen werden kann. Komponenteneigenschaften haben bei Namenskonflikten Vorrang.

Dies kann die Vue.prototype-Erweiterung von Vue 2.x ersetzen:

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

Wenn wir http innerhalb der Komponente aufrufen möchten, müssen wir getCurrentInstance() verwenden, um es abzurufen .

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

getCurrentInstance repräsentiert den Kontext, also die aktuelle Instanz. ctx entspricht diesem von Vue2, es ist jedoch wichtig zu beachten, dass ctx nur für die Entwicklungsphase geeignet ist. Wenn das Projekt gepackt und auf dem Produktionsserver ausgeführt wird, kann ctx kein Routing und kein Global erhalten Montage von Objekten. Die Lösung für dieses Problem besteht darin, Proxy anstelle von CTX zu verwenden. Die Codereferenz lautet wie folgt.

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

Das obige ist der detaillierte Inhalt vonSo definieren Sie globale Variablen in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!