VUEXの概要

Vuexは何ですか？

　　vuexはVue.jsアプリケーションの状態管理のために特別に開発されています。彼が発生し、予測可能な方法の変換を確実にするために、すべての集中ストレージ管理アプリケーションを使用してコンポーネント、および対応する状態ルールの状態

　　VUEXはあなたのコードの構造を限定するものではなく、しかし、彼はいくつかのルールに従うする必要が出て設定します。

　　　　1.適用状態レベルは、単一のオブジェクトストアに集中しなければなりません

　　　　2.変異を提出する状態を変更する唯一の方法であり、このプロセスは同期です

　　　　3.非同期論理は、内部アクションにカプセル化されるべきです

　　最初に使用する前にインストールを

　　　　1.インストールvuex NPMインストールvuex --save VUE-CLIで

　　　　2.フォルダを保存するためにsrcディレクトリに新しいファイル名を作成し、次のように新しいコンテンツストアindex.jsフォルダの導入を容易にするために、

「VUE」からインポートヴュ。
「vuex」からインポートVuex。
Vue.use（Vuex）。
constの店=新しいVuex.Store（）; 
 
輸出デフォルトのストア。

　　　　3.次にmain.jsは、店舗内に導入し、これは$ストアの各構成要素に使用することができるように、次に、全体的な注入を見.;

「./store'//引入ストアからインポートストア
 
（{新しいヴュー
  ：#app 'EL' 
  ルータ、
  店舗、//使用ストア
  テンプレート： '<APP />'、
  コンポーネント：{アプリケーション} 
}）

　　次のインストールが完了 話題にエントリを

　　STATEの状態は、各ストアの状態のツリーの単一のアプリケーション、状態記憶状態、一般的なすべてのコンポーネントのパケット・データ・ストレージのために考慮されるすべてのコンポーネントの状態データであります

{STATE = CONST 
        するtableHeader：// []、ヘッダデータテーブル
        [] //コンテンツデータテーブル：たtableData 
    }

　　mapstateヘルパー機能 コンポーネントが複数の状態を取得したい場合、それぞれの状態は、いくつかの重複を属性計算すると宣言されているので、私はプロパティを計算mapstateの生成を助けるためにそれを使用

//使用mapstate

計算：{ 
　　... mapState（[ 
	//ヘッダデータテーブル
        "するtableHeader"、
        コンテンツの//データテーブル
	"TABLEDATA" 
　　]）
}

　GETTERSの　すべてのコンポーネントのプロパティを計算ゲッターは、戻り値のゲッターは、彼の依存性に応じてキャッシュされ、かつ、価値の彼の経時変化後に再計算されます

　突然変異方法における突然変異Storeは、変異変更されたデータオブジェクトは、コールバック関数の種類を保持し、最初のパラメータは状態であり、第二の引数は、カスタムパラメータである負荷ペイロードでのみ使用することができるmutaionsにコールバック関数を呼び出しstore.commit（タイプ、ペイロード）

{変異=定数
        //取得ヘッダデータ
        [type.GET_HEADER_DATA]（状態、データ）{ 
            state.tableHeader =データ;     
        } 
        //ボリュームデータテーブルを取得
        [type.GET_TABLE_DATA]（状態、データ）{ 
            state.tableData =データ;   
        } 
    }

　　代わりに、イベントの一定の変異型を使用しますが、store.jsで参照しなければなりませんの

//mutations.js 
　　輸出=一定GET_TABLE_DATA「GET_TABLE_DATAは、」//データのリストを取得
　　輸出のconst GET_HEADER_DATA =「GET_HEADER_DATAを」//ヘッダデータのリストを取得
//store.js 
　　../store/mutions-types「からタイプのASインポート*を"

　　突然変異を提出した（「XXX」）$ Store.commit。このアセンブリで使用することができるアセンブリに突然変異を提出、またはアセンブリ方法は、ストアのルートで注入マッピングされたstore.commitコールが必要な補助機能mapMutationを使用

'vuex'からインポート{} mapMutations 
輸出デフォルト{ 
  // ... 
  方法：{ 
    ... mapMutations（[ 
      'GET_TABLE_DATA'、//将`this.increment（）` `映射为、この$のstore.commit（」インクリメント'）
　　]} 
  } 
}

　ACTIONのアクションは変異が直接ステータスを変更するのではなく、突然変異提出アクションであることを除いて類似しているが、アクションが含むことができる非同期操作を

CONSTアクション= { 
        //获取表格头部数据
        getTableHeader：関数（{}、状態をコミット）{ 
           （api.getTableHeaderを返す）、次いで（RES => {。
               コミット（type.GET_HEADER_DATA、res.data.Model.headList）
            } ）
            .catch（（エラー）=> { 
                アラート（ 'エラー'）
            }）
        } 
        //获取表格体
        getTableData：関数（{}、状態をコミット）{ 
            （api.getTableDataを返す）、次いで（RES => { 
                / /にconsole.log（RES）
                コミット（type.GET_TABLE_DATA、res.data.Model.list）
            }）
        } 
}

　　配信アクションstore.dispatch法によってトリガも通話をstore.dispatchする方法mapActionヘルパーコンポーネントをマッピングするために使用することができる（ルートノードにストアを注入する必要があります）

方法：{ 
    getTableHeader（）{ 
       この$のstore.dispatch（ "ユーザ/ getTableHeader"）を（（）=> {。。
        this.tableHeader =この$ store.state.users.tableHeader。
       }）
    } 
} 
---- ------------------------或者------------------------- --------- 
方法：{ 
	... mapActions（[ 
		//表头数据
		"getTableHeader" 
		]）
}

　　モジュールの各モジュールの格納モジュールにモジュール（モジュール）は、自身の状態、突然変異、アクション、ゲッター、あるいはネストされたブロックを有する-上から下に同じ方法で分割されています

おすすめ