Comment changer les variables globales dans vue

Comment modifier les variables globales dans Vue

Dans Vue, les variables globales sont accessibles et modifiées dans les instances ou composants Vue. Les variables globales stockent généralement diverses informations de configuration ou statuts dans l'application. Changer la valeur des variables globales dans une instance ou un composant Vue peut donner à l'application plus d'interactions et de comportements personnalisés, améliorant ainsi l'expérience utilisateur et l'évolutivité de l'application. Ainsi, cet article expliquera comment modifier les variables globales dans Vue.

La première façon : utiliser Vue.prototype

Vue.prototype est une instance de Vue vide, et des variables globales peuvent être définies sur son prototype, de sorte que toutes les instances de Vue Les deux composants les instances et les instances de composants peuvent hériter des variables globales du prototype pour réaliser un partage global de données. Voici un exemple de code :

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

Dans le code ci-dessus, nous définissons la variable globale sous Vue.prototype.$globalData, qui contient deux propriétés : message et count. Parmi eux, la valeur initiale du message est "hello world" et la valeur initiale du count est 0.

Pour utiliser ces variables globales dans un composant, utilisez simplement this.$globalData dans le composant pour accéder à :

<template>
    <div>
        <h1>{{ $globalData.message }}</h1>
        <p>{{ $globalData.count }}</p>
    </div>
</template>

Dans le code ci-dessus, nous pouvons y accéder via ceci. $ globalData.message et this.$globalData.count pour obtenir la valeur des variables globales à afficher sur la page.

Si vous devez mettre à jour la valeur de la variable globale dans l'instance ou le composant Vue, utilisez this.$globalData dans l'instance ou le composant Vue pour accéder et modifier la valeur de la variable globale, par exemple :

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

Dans le code ci-dessus, nous définissons une méthode nommée IncreaseCount, qui peut être appelée dans les instances et composants Vue. Chaque appel augmentera la valeur de $globalData.count de un, modifiant ainsi les variables globales. .

Deuxième méthode : utiliser Vue.observable

Vue.observable est une dépendance de Vue, qui peut créer un objet pouvant être observé. À l'aide d'un objet Observable, les propriétés de l'objet peuvent être surveillées et modifiées dans n'importe quel composant Vue. Voici un exemple de code :

import Vue from "vue";

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

export default store;

Dans le code ci-dessus, nous importons d'abord Vue et utilisons la méthode Vue.observable pour créer un objet observable nommé store, qui contient deux propriétés : message et count . Parmi eux, la valeur initiale du message est "hello world" et la valeur initiale du count est 0.

Pour utiliser ces variables globales dans le composant, il vous suffit d'introduire le store au sein du composant pour accéder :

<template>
    <div>
        <h1>{{ store.message }}</h1>
        <p>{{ store.count }}</p>
    </div>
</template>

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

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

Dans le code ci-dessus, nous avons d'abord introduit l'objet store , et dans Une méthode nommée store est définie dans l'attribut calculé, qui renvoie l'objet store. Dans le modèle, vous pouvez utiliser store.message et store.count pour obtenir la valeur de la variable globale à afficher sur la page.

Si vous devez mettre à jour la valeur d'une variable globale dans une instance ou un composant Vue, il vous suffit de la mettre à jour via une affectation, par exemple :

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

Dans ce qui précède code, nous Une méthode nommée IncreaseCount est définie, qui peut être appelée dans les instances et composants Vue. Chaque appel augmentera la valeur de store.count de un, modifiant ainsi la variable globale.

Résumé :

Cet article présente deux façons de modifier les variables globales dans Vue : en utilisant Vue.prototype et en utilisant Vue.observable. Les deux méthodes peuvent accéder et modifier des variables globales, mais la méthode Vue.observable est la méthode officiellement recommandée par Vue. Quelle que soit la méthode que vous utilisez, les variables globales doivent être utilisées avec prudence pour éviter un comportement confus et imprévisible dans votre application. Bien entendu, si elles sont bien conçues, les variables globales peuvent également devenir un élément important d’une application.

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!