Vue ドキュメントのグローバル状態管理機能の実装手順

Vue.js は、強力なデータ バインディングおよびコンポーネント化機能を備えた人気のある JavaScript フレームワークです。 Vue.js では、グローバル状態管理は非常に重要なタスクであり、これにより、さまざまなコンポーネントがデータを共有し、データの一貫性を維持できるようになります。この記事では、Vue.js ドキュメントにグローバル状態管理機能を実装する手順を紹介します。

Vue.js では、グローバル状態管理は通常、Vuex ライブラリを使用して実装されます。 Vuex は、Vue.js 用に特別に設計された状態管理モデルで、データ レイヤーを簡単に管理し、コンポーネント間のデータのやり取りを回避できます。

実装手順は次のとおりです:

1. Vuex のインストール

まず、npm を使用して Vuex をインストールする必要があります: npm install vuex --save

2. ストアの作成

#Vue.js では、ストアは状態とデータを保存するために使用される場所です。 main.js に新しいストアを作成し、それを Vue インスタンスに渡す必要があります。

「vue」から Vue をインポート

「vuex」から Vuex をインポート

Vue.use(Vuex)

const store = new Vuex.Store({

状態: {

count: 0

},

変異: {

increment(state) {
  state.count++
}

}

})

new Vue({

el: '#app ',
ストア,
テンプレート: '578d07aa9e36ca6b43806c9706879c6d',
コンポーネント: { アプリ }
})

ステータスを設定

状態オブジェクトを使用してデータを保存できます。上の例では、count という状態を設定し、その初期値を 0 に設定します。状態を変更する必要がある場合は、mutation を呼び出して状態を変更する必要があります。

ミューテーションの記述

ミューテーションは、状態を変更できる唯一の場所です。状態の値を直接変更するのではなく、突然変異を通じて状態を更新する必要があります。これを行うと、状態の変化を追跡するのに役立ちます。

上記の例では、count の値を増やすことができる、increment という名前の突然変異を作成しました。

呼び出しミューテーション

状態を変更する必要がある場合、ミューテーションを呼び出す必要があります。 this.$store.commit(mutationName) を使用してミューテーションを呼び出すことができます。

コンポーネントでミューテーションを呼び出す例:

methods: {

increment() {

this.$store.commit('increment')

}

}

テンプレート内の例ミューテーションの呼び出し:

163be9d00220f7d75b178fb6f4dc4c83Increment65281c5ac262bf6d81768915a4a77ac0

Get status

状態を取得するには、this.$store.state.stateName を使用します。

コンポーネントでステータスを取得する例:

computed: {

count() {

return this.$store.state.count

}

}

テンプレート内の例ステータスの取得方法:

e388a4556c0f65e1904146cc1a846bee{{ $store.state.count }}94b3e26ee717c64999d7867364b1b4a3

概要:

ストアを作成し、ステータスを設定する、ミューテーションの書き込み、ミューテーションの呼び出し、ステータスの取得を行うことで、Vue.js でグローバル ステータス管理を実装できます。 Vuex は、単純なデータの管理に使用できるだけでなく、非同期操作、データ キャッシュ、モジュール化などの複雑なアプリケーション シナリオの処理にも使用できます。この記事が、初心者が Vuex の実装手順をよりよく理解するのに役立つことを願っています。

以上がVue ドキュメントのグローバル状態管理機能の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。