Vueでグローバル変数を変更する方法

Vue でグローバル変数を変更する方法

Vue では、Vue インスタンスまたはコンポーネントでグローバル変数にアクセスして変更できます。グローバル変数は通常、アプリケーションのさまざまな構成情報やステータスを保存します。 Vue インスタンスまたはコンポーネントのグローバル変数の値を変更すると、アプリケーションにさらに多くのインタラクションとカスタム動作を与えることができるため、ユーザー エクスペリエンスが向上し、アプリケーションのスケーラビリティが向上します。そこで、この記事ではVueでグローバル変数を変更する方法を紹介します。

最初の方法: Vue.prototype を使用する

Vue.prototype は空の Vue インスタンスです。そのプロトタイプにグローバル変数を定義できるため、すべての Vue インスタンスとコンポーネント インスタンスがグローバル変数になります。プロトタイプから継承して、グローバルなデータ共有を実現します。以下はサンプル コードです:

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

上記のコードでは、Vue.prototype.$globalData の下にグローバル変数を定義します。この変数には、message と count の 2 つのプロパティが含まれます。このうち、messageの初期値は「hello world」、countの初期値は0です。

これらのグローバル変数をコンポーネントで使用するには、コンポーネント内で this.$globalData を使用してアクセスします:

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

上記のコードでは、this.$globalData.message 経由でアクセスできます。および this.$globalData.count を使用してグローバル変数の値を取得し、ページに表示します。

Vue インスタンスまたはコンポーネントのグローバル変数の値を更新する必要がある場合は、Vue インスタンスまたはコンポーネントで this.$globalData を使用して、グローバル変数の値にアクセスして変更します。次に例を示します。 ##

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

上のコードでは、incrementCount という名前のメソッドを定義しており、Vue インスタンスとコンポーネントで呼び出すことができます。呼び出すたびに、$globalData.count の値が 1 ずつ増加し、それによってグローバル変数が変更されます。

2 番目の方法: Vue.observable を使用する

Vue.observable は Vue の依存関係であり、監視可能なオブジェクトを作成できます。 Observable オブジェクトを使用すると、任意の Vue コンポーネントでオブジェクトのプロパティを監視および変更できます。以下はサンプル コードです:

import Vue from "vue";

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

export default store;

上記のコードでは、最初に Vue をインポートし、Vue.observable メソッドを使用して、store という名前の Observable オブジェクトを作成します。このオブジェクトには、message と count の 2 つのプロパティが含まれます。このうち、messageの初期値は「hello world」、countの初期値は0です。

これらのグローバル変数をコンポーネントで使用するには、コンポーネント内にストアを導入してアクセスするだけです:

<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>

上記のコードでは、最初にストア オブジェクトを導入し、それを次のように定義しました。計算された属性 store という名前のメソッドは、store オブジェクトを返します。テンプレートでは、store.message および store.count を使用して、ページに表示するグローバル変数の値を取得できます。

Vue インスタンスまたはコンポーネントのグローバル変数の値を更新する必要がある場合は、代入を通じて更新するだけです。たとえば、次のようになります。

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

上記のコードでは、次のように定義します。名前 これは、incrementCount メソッドです。このメソッドは、Vue インスタンスおよびコンポーネントで呼び出すことができます。呼び出すたびに、store.count の値が 1 ずつ増加し、それによってグローバル変数が変更されます。

概要:

この記事では、Vue が Vue.prototype を使用する方法と Vue.observable を使用する 2 つの方法でグローバル変数を変更する方法を紹介します。どちらのメソッドでもグローバル変数へのアクセスと変更を実現できますが、Vue.observable メソッドは Vue によって公式に推奨されるメソッドです。どの方法を使用するかに関係なく、アプリケーションの混乱や予測不可能な動作を避けるために、グローバル変数は注意して使用する必要があります。もちろん、適切に設計すれば、グローバル変数もアプリケーションの重要な部分になる可能性があります。

以上がVueでグローバル変数を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。