So ändern Sie globale Variablen in Vue

So ändern Sie globale Variablen in Vue

In Vue kann auf globale Variablen in Vue-Instanzen oder -Komponenten zugegriffen und diese geändert werden. Globale Variablen speichern normalerweise verschiedene Konfigurationsinformationen oder Status in der Anwendung. Das Ändern des Werts globaler Variablen in einer Vue-Instanz oder -Komponente kann der Anwendung mehr Interaktionen und benutzerdefiniertes Verhalten verleihen und so das Benutzererlebnis verbessern und die Skalierbarkeit der Anwendung verbessern. In diesem Artikel erfahren Sie, wie Sie globale Variablen in Vue ändern.

Der erste Weg: Verwenden Sie Vue.prototype

Vue.prototype ist eine leere Vue-Instanz, und in ihrem Prototyp können globale Variablen definiert werden, sodass alle Vue-Instanzen beide Komponenten sind Instanzen und Komponenteninstanzen können globale Variablen vom Prototyp erben, um eine globale Datenfreigabe zu erreichen. Das Folgende ist ein Beispielcode:

Vue.prototype.$globalData = {
    message: "hello world",
    count: 0
};

Im obigen Code definieren wir die globale Variable unter Vue.prototype.$globalData, die zwei Eigenschaften enthält: message und count. Unter diesen ist der Anfangswert der Nachricht „Hallo Welt“ und der Anfangswert der Zählung ist 0.

Um diese globalen Variablen in einer Komponente zu verwenden, verwenden Sie einfach diese.$globalData innerhalb der Komponente, um darauf zuzugreifen:

<template>
    <div>
        <h1 id="globalData-message">{{ $globalData.message }}</h1>
        <p>{{ $globalData.count }}</p>
    </div>
</template>

Im obigen Code können wir darüber darauf zugreifen. $ globalData.message und this.$globalData.count, um den Wert globaler Variablen abzurufen, die auf der Seite angezeigt werden sollen.

Wenn Sie den Wert der globalen Variablen in der Vue-Instanz oder -Komponente aktualisieren müssen, verwenden Sie this.$globalData in der Vue-Instanz oder -Komponente, um beispielsweise auf den Wert der globalen Variablen zuzugreifen und ihn zu ändern :

methods: {
    incrementCount() {
        this.$globalData.count += 1;
    }
}

Im obigen Code definieren wir eine Methode namens incrementCount, die in Vue-Instanzen und -Komponenten aufgerufen werden kann. Jeder Aufruf erhöht den Wert von $globalData.count um eins und ändert dadurch globale Variablen . .

Zweiter Weg: Verwenden Sie Vue.observable

Vue.observable ist eine Abhängigkeit von Vue, die ein Objekt erstellen kann, das beobachtet werden kann. Mithilfe eines Observable-Objekts können die Eigenschaften des Objekts in jeder Vue-Komponente überwacht und geändert werden. Hier ist ein Beispielcode:

import Vue from "vue";

const store = Vue.observable({
    message: "hello world",
    count: 0
});

export default store;

Im obigen Code importieren wir zunächst Vue und verwenden die Vue.observable-Methode, um ein Observable-Objekt namens store zu erstellen, das zwei Eigenschaften enthält: message und count . Unter diesen ist der Anfangswert der Nachricht „Hallo Welt“ und der Anfangswert der Zählung ist 0.

Um diese globalen Variablen in der Komponente zu verwenden, müssen Sie nur den Store innerhalb der Komponente einführen, um darauf zuzugreifen:

<template>
    <div>
        <h1 id="store-message">{{ store.message }}</h1>
        <p>{{ store.count }}</p>
    </div>
</template>

<script>
import store from "@/store.js";

export default {
    computed: {
        store() {
            return store;
        }
    }
};
</script>

Im obigen Code haben wir zuerst das Store-Objekt eingeführt und im berechneten Attribut ist eine Methode namens „store“ definiert, die das Store-Objekt zurückgibt. In der Vorlage können Sie „store.message“ und „store.count“ verwenden, um den Wert der globalen Variablen abzurufen, die auf der Seite angezeigt werden soll.

Wenn Sie den Wert einer globalen Variablen in einer Vue-Instanz oder -Komponente aktualisieren müssen, müssen Sie ihn nur durch Zuweisung aktualisieren, zum Beispiel:

methods: {
    incrementCount() {
        store.count += 1;
    }
}

Oben Code, wir Eine Methode namens incrementCount ist definiert, die in Vue-Instanzen und -Komponenten aufgerufen werden kann. Jeder Aufruf erhöht den Wert von store.count um eins und ändert dadurch die globale Variable.

Zusammenfassung:

In diesem Artikel werden zwei Möglichkeiten zum Ändern globaler Variablen in Vue vorgestellt: die Verwendung von Vue.prototype und die Verwendung von Vue.observable. Beide Methoden können auf globale Variablen zugreifen und diese ändern, aber die Vue.observable-Methode ist die offiziell von Vue empfohlene Methode. Unabhängig davon, welche Methode Sie verwenden, müssen globale Variablen mit Vorsicht verwendet werden, um verwirrendes und unvorhersehbares Verhalten in Ihrer Anwendung zu vermeiden. Natürlich können globale Variablen bei gutem Design auch zu einem wichtigen Bestandteil einer Anwendung werden.

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