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

WBOY
リリース: 2023-06-20 13:31:32
オリジナル
1584 人が閲覧しました

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

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

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

  1. Vuex のインストール

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

  1. ストアの作成
#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 ',
ストア,
テンプレート: '',
コンポーネント: { アプリ }
})

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

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

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

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

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

methods: {

increment() {

this.$store.commit('increment')
ログイン後にコピー

}

}

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

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

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

computed: {

count() {

return this.$store.state.count
ログイン後にコピー

}

}

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

{{ $store.state.count }}

概要:

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート