Vuex全体のケースの詳細な説明

Vuex全体のケースの詳細な説明

ここに画像の説明を挿入

1. はじめに

Vuex のより専門的な紹介を見てみましょう。

Vuex は、Vue 専用に開発されたアプリケーションの状態管理モードです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変更されるようにします。

つまり、Vuex はグローバル オブジェクトのような形式を使用して、すべてのコンポーネントの共通データを管理します。このグローバル オブジェクトのデータを変更したい場合は、Vuex が提供する方法で変更する必要があります (任意の方法で変更することはできません)。

2. 利点

Vuex の状態管理と従来のグローバル変数の使用の違い:

  1. Vuex の状態ストレージは応答性があります。つまり、コンポーネントがこの Vuex の状態を使用する場合、状態が変更されると、関連するすべてのコンポーネントが対応するデータを自動的に更新するため、開発者の手間が大幅に軽減されます。
  2. Vuex の状態は直接変更できません。グローバル オブジェクト変数の場合は簡単に変更できますが、Vuex では変更できません。変更したい場合は、Vuex が提供する唯一の方法、つまりmutations明示的に送信 ( commint ) して実装する必要があります。これを行う利点は、各状態の変更を簡単に追跡できることです。これは、開発プロセス中にデバッグするときに非常に実用的です。

3. 使用手順

1. Vuexをインストールする

npm インストール vuex --save

2. Vuexを参照する

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)

3. 倉庫ストアを作成する

Vuex を使用するには、ウェアハウスと呼ばれるインスタンスstoreを作成し、このウェアハウスstoreを使用してステータスを管理する必要があります。

//ストアを作成する
Vuex のインスタンスを新規に作成します。

4. 含まれるモジュール

  • 状態: アプリケーション状態のデータ構造を定義します。ここでデフォルトの初期状態を設定できます。
  • Getter : コンポーネントがストアからデータを取得できるようにします。mapGetters ヘルパー関数mapGettersストア内のgetterローカルの計算プロパティにマップするだけです。
  • Mutation : ストア内の状態を変更する唯一の方法であり、同期関数である必要があります。
  • アクション: 状態を直接変更するのではなく、 mutation送信するために使用され、任意の非同期操作を含めることができます。
  • モジュール: ストアはモジュールに分割できます。各モジュールには独自のstatemutationactiongetter 、さらにはネストされたサブモジュールがあります。

Vuex の役割は、グローバル オブジェクトの役割に似ています。Vuex は単一の状態ツリーを使用し、オブジェクト State を使用してアプリケーション階層全体のすべての状態を格納します。これらの状態は、グローバル変数とデータの集合として理解できます。

ここに写真の説明を記入してください

1. 状態

グローバル状態count値が 5 であるとします。次に、それをstateオブジェクト内のkeyvalueとして定義し、グローバル状態として使用することができます。次のように:

 //ストアを作成する
 定数ストア = 新しい Vuex.Store({
    //state はアプリケーション層の状態を格納します:{
        count:5 //合計: 5
    }
 });

2. ゲッター

getterscomputedと同様に、状態内のデータをフィルタリングおよび変換できるストアの計算されたプロパティであると考えることができます。

state.countに基づいて新しい状態newCountを導出したい場合、 gettersを使用するのが適切です。

getters最初の引数としてstateを受け入れる

定数ストア = 新しい Vuex.Store({
   //state はアプリケーション層の状態を格納します:{
      count:5 //合計: 5
   },
   ゲッター:{
      newCount:state => state.count * 3
   }
});

コンポーネントを取得する{ {newCount}}メソッド:

エクスポートデフォルト{
  計算: {
      新しいカウント(){
          this.$store.getters.newCount を返します。
      }
  }
};  

3. 突然変異

Vuexが提供するウェアハウスstoreの状態を変更する唯一の方法は、 mutationを送信することであり、それは同步函數でなければなりません。

我々は、 mutationsincrementという関数を定義しました。関数本体は変更を加える場所です。

最初のパラメータとしてstateを受け入れ、2番目はカスタムパラメータです

 定数ストア = 新しい Vuex.Store({
    //state はアプリケーション層の状態を格納します:{
        count:5 //合計: 5
    },
    // ミューテーションは状態ミューテーションでデータを変更する唯一の方法です:{
        増分(状態、値) {
            状態.count += 値;
        }
    }
 });

commitを送信すると、最初のパラメータ"increment"mutationsincrementメソッドに対応し、2 番目のパラメータはカスタム値になります。例えば:

 メソッド: {
   getVal(イベント) {
     //現在のキー値を取得します。let value = event.target.dataset.value;
     // commit 経由で increment という名前のミューテーションを送信します
     this.$store.commit("増分", 値);
   }
 }

コンポーネントを取得する{ {count}}メソッド:

エクスポートデフォルト{
  計算: {
      カウント(){
          this.$store.state.count を返します。
      }
  }
};  

4. アクション

  1. 状態を直接変更するのではなく、 mutation送信するために使用され、任意の非同期操作を含めることができます。
  2. このプロセスはaction=>mutations=>statesを通じてのみ実行されます。具体的な手順は次のとおりです。
デフォルトの新しいVuex.Storeをエクスポートします({
    //データ状態を保存する: {
        オブジェクト: {},
    },
    //4. コミットミューテーションのメソッドを使用してミューテーションを処理する: {
        getParam(状態、オブジェクト) {
            //5. 状態のデータを変更する state.obj = Object
        }
    },
    //2. ディスパッチアクションによって渡されたメソッドとパラメータを受け入れます: {
        getParamSync(ストア、オブジェクト) {
            // 非同期操作を処理する setTimeout(() => {
                //3. getParam というミューテーションをコミットで送信する
                //アクション関数はストアインスタンスオブジェクトを受け取るので、store.commitを呼び出して変更をコミットすることができます。
                store.commit('getParam', オブジェクト);
            }, 1000)
        }
    }
})

その後、コンポーネント内でそれを呼び出すことができます。

メソッド: {
   getVal() {
	  名前を 'xia' にします。
	  年齢を '26' とします。
	  sex = 'man' とします。
	  //1. getParamSyncメソッドと複数のパラメータ{name, age, sex}をディスパッチを通じてアクションに渡す
	  this.$store.dispatch('getParamSync',{名前、年齢、性別})
   }
}

5. モジュール

プロジェクトの複雑さが増すにつれて、Vuex の管理を容易にするために、将来の管理を容易にするために、一般的には機能に応じてさまざまなModuleに分割されます。各モジュールには独自のstatemutationactiongetter 、さらにはネストされたサブモジュールがあります。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./state' から状態をインポートします
'./mutations' から変異をインポートします
'./actions' からアクションをインポートします
'./getters' から * をゲッターとしてインポートします。

moduleA を './module/moduleA' からインポート // モジュール A
moduleB を './module/moduleB' からインポート // モジュール B

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    行動、
    ゲッター、
    州、
    突然変異、
    モジュール:
        モジュールA、
        モジュールB
    }
})

moduleA.js / moduleB.jsファイル

// 各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあります export default {
    州: {
        テキスト: 'モジュールA'
    },
    ゲッター: {},
    変異: {},
    アクション: {}
}

その後、コンポーネント内でそれを呼び出すことができます。

<テンプレート>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</テンプレート>
計算: {
    getText1(){
    	this.$store.state.moduleA.text を返します。
    },
    // または ...mapState({
		getText2: 状態 => state.moduleB.text;
	})
}

このことから、モジュール内の状態はローカルであり、モジュール自体にのみ属しているため、外部からは対応するモジュール名を介してアクセスする必要があることがわかります。

5. Vuexの最もシンプルなプロジェクト例

vuex 構文シュガーmapMutationsmapGetters使用する

1. データの保存

.vue ファイル

import { mapMutations } from "vuex"; // mapMutations をインポートする
エクスポートデフォルト{
	メソッド: {
		...mapMutations({
		    // ミューテーション内の SET_NEWS に changeNews を関連付けます changeNews: "SET_NEWS"
		})、
		提出する(){
			// changeNewsという名前のミューテーションを送信し、パラメータvalを渡します
			let val = 'テストニュース';
			this.changeNews(val); // this.$store.commit("changeNews", val); と同等
		}
	}
}

2. データを取得する

b.vue ファイル

import { mapGetters } from "vuex"; // mapGetters をインポートする 
エクスポートデフォルト{
	計算: {
        // vuex を使用してデータを読み取ります (getters.js 内のデータが読み取られます)
        // this.$store.getters.news と同等 (vuex 構文シュガー)
        ...mapGetters(["ニュース"])
	},
	作成された() {
        // ゲッターでニュースデータを取得します console.log(this.news);
	}
}

3. ファイルのディレクトリ構造を保存する

ここに写真の説明を記入してください

インデックス

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./state' から状態をインポートします
'./mutations' から変異をインポートします
'./actions' からアクションをインポートします
'./getters' から * をゲッターとしてインポートします。

//状態が変更されるたびに、ログがコンソールに表示されます
'vuex/dist/logger' から createLogger をインポートします。

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

デフォルトの新しいVuex.Storeをエクスポートします({
	行動、
	ゲッター、
	州、
	突然変異、
	strict: debug, // debug=true の場合、厳密モードを有効にします (パフォーマンスの低下)
	プラグイン: デバッグ? [createLogger()]: []
})

状態.js

定数状態 = {
	ニュース: {}
}

デフォルト状態をエクスポートします。

変異.js

const 変異 = {
	SET_NEWS(状態、値) {
		状態.ニュース = val
	}
}

デフォルトのミューテーションをエクスポートします。

アクション

//非同期処理 const actions = {
    M_NEWS({コミット}, val) {
        commit('SET_NEWS', val); // ミューテーションをコミットする }
}

デフォルトのアクションをエクスポートします。

ゲッターズ

//通常はゲッターを介してデータを取得します (this.$store.getters.news;)
export const news = state => state.news // 他の処理を行わずに直接マップします

4. ストアの利用

main.js内の参照

import store from './store' //vuexストレージファイル new Vue({
	el: '#app',
	ルーター、
	店、
	コンポーネント:
		アプリ
	},
	テンプレート: '<App/>'
})

Vuex の全体的な事例の詳細説明については、この記事で終わります。より関連性の高い Vuex コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vuex の使い方入門チュートリアル
  • まだvuexをお使いですか?piniaについて学ぶ
  • Vuex でのアクションの使用に関する詳細なチュートリアル
  • VueXのインストールと使用方法の基本チュートリアル
  • Vue学習におけるVuexの使用の詳細な説明
  • Vuexの特性と機能の詳細な説明
  • Vuex のコアコンセプトと基本的な使用法の詳細な説明
  • Vueプロジェクトでvuexを使用する方法
  • Vuexの役割についての深い理解
  • 1 つの記事で Vuex を理解する
  • Vuex の詳細な紹介と使用方法

<<:  MySQLクエリ構文の概要

>>:  Ubuntu 20.04 LTS で Java 開発環境を構成する

推薦する

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

vue3 を使用したジグソーパズルゲームのリファクタリングの例

序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...

MySQL エラー: 接続数が多すぎる場合の解決策

MySQLデータベースの接続が多すぎますこのエラーは明らかに、mysql_connect の後に m...

Ubuntu 16.4 で完全に分散された Hadoop 環境を構築するための実践的なチュートリアル

序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

写真とテキストによる MySQL と sqlyog のインストール チュートリアル

1. MySQL 1.1 MySQLのインストールmysql-5.5.27-winx64 ダウンロー...

CentOS で LibreOffice を使用してドキュメント形式を変換する方法

プロジェクト要件では、アップロードされたドキュメントの前処理が必要です。ユーザーが doc 形式でド...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

Linux の netstat コマンドの詳細な紹介

目次1. はじめに2. 出力情報の説明3. netstatの共通パラメータ4. netstatネット...

DockerにRedisコンテナをインストールするための実装手順

目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...

MySQLカバーインデックスの使用例

カバーインデックスとは何ですか?クエリで使用されるすべてのフィールドを含むインデックスを作成すること...

Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要

目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

Robots.txtの詳細な紹介

Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...