VUE3 基本チュートリアル: Vue.js 状態管理の使用

Vue.js は、Web ユーザー インターフェイスを構築するための最新の JavaScript フレームワークです。これは非常に人気のあるフレームワークであり、開発者の間で広く使用されています。 Vue.js の重要な機能は状態管理で、アプリケーション内のデータのフローと制御を管理できます。この記事では、Vue.js 状態管理の基本を紹介し、Vue.js を使用して状態を管理する方法を示します。

Vue.js 状態管理の基盤

Vue.js 状態管理は、Vuex ライブラリに基づいて実装されています。 Vuex は Vue.js 専用の状態管理ライブラリであり、アプリケーション内でのデータの伝播と共有を管理するために使用されます。 Vuex には、状態、ミューテーション、アクション、ゲッターという 4 つの基本概念が含まれています。

State:

State はアプリケーションの状態を表し、Vue.js 内のすべてのデータのストレージを表します。これは、アプリケーションからのデータを保存するストレージ コンテナーです。

ミューテーション:

ミューテーションは状態を変更する方法です。状態オブジェクト内でのみ実行できます。同期のみ可能で、非同期操作は処理できません。

アクション:

アクションは、Vue コンポーネントから非同期リクエストを受信し、ミューテーションを使用してアプリケーションの状態を更新するために使用されます。サーバー側からデータを取得し、ミューテーションを使用してデータの受信後にアプリケーションの状態を更新できます。

ゲッター:

ゲッターを使用すると、状態から特定のデータを取得できます。これは計算プロパティに似ています。この機能を使用すると、ステータスデータを簡単に取得できます。

Vue.js 状態管理の使用

このセクションでは、Vue.js アプリケーションで状態管理を使用する方法を示します。

Vuex のインストール:

まず、Vuex ライブラリをインストールする必要があります。 Vue.js アプリケーションで npm パッケージ マネージャーを使用してインストールします。

npm install vuex

Build state:

次に、アプリケーションに状態を作成する必要があります。この状態は、データと変更可能な状態を含む JavaScript オブジェクトです。

const store = new Vuex.Store({
state: {

count: 0

}
})

上記のコード スニペットはカウント状態を作成します。 count の初期値は 0 です。ストア オブジェクトを使用すると、状態変数にアクセスできます。この状態をアプリケーションのさまざまな部分で使用して、データを表示および更新できます。

アクセス ステータス:

カウント ステータスをストア オブジェクトに保存したので、次のステップはステータスを取得することです。この目的のために、ゲッターを使用してステータスにアクセスします。

ゲッター: {

getCount: state => state.count

}

上記のコードは、ゲッター: getCount を定義します。これは、カウントステータス。

ステータスの更新:

次に、ステータスを更新するためのミューテーションが必要です。

mutations: {

increment (state) {
    state.count++;
},
decrement (state) {
    state.count--;
}

}

上記のコード スニペットは、インクリメントとデクリメントという 2 つのミューテーションを定義しています。ここでは、これら 2 つの突然変異を使用して、カウンターをインクリメントおよびデクリメントします。

状態の使用:

状態、ゲッター、ミューテーションを定義したので、これらの値を Vue.js コンポーネントで使用できます。

7ab6b075cc6c7bcbe15d0b9685c6f1da
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{getCount}}</h1>
<button @click="increment">Increase</button>
<button @click="decrement">Decrease</button>

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
デフォルトのエクスポート {

methods: {
  increment () {
    this.$store.commit('increment')
  },
  decrement () {
    this.$store.commit('decrement')
  }
},
computed: {
  getCount () {
    return this.$store.getters.getCount
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

上記のコードは、Vue コンポーネントで状態、ゲッター、ミューテーションを使用する方法を示しています。インクリメントとデクリメントのミューテーションと getCount ゲッターを使用してステータスを取得します。このようにして、コンポーネント内の状態を使用してデータを表示および更新できます。

結論

Vue.js 状態管理は、アプリケーション内のデータ フローを簡単に管理できる柔軟なツールです。 Vue.js に組み込まれた状態管理を使用するか、サードパーティのライブラリを使用することで、アプリケーションの状態を簡単に管理できます。 Vue.js アプリケーションで状態管理を使用する場合、状態にはアプリケーションのデータのみが含まれ、ロジックは含まれないことに注意してください。アプリケーションの良好な保守性とスケーラビリティを確保するために、状態管理はシンプルかつ明確に保つ必要があります。

以上がVUE3 基本チュートリアル: Vue.js 状態管理の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。