概要
1. Vuexは何ですか？
Vuexは、状態管理モデルであり、主に複数のビューの間のグローバル共有状態を管理するために使用されます。
州、ゲッター、突然変異、アクション、モジュール：5つの属性、すなわちがありますVuex。
- 国家のプロパティのvuex
Aは、Vuexが倉庫で、倉庫内のオブジェクトの多くを置きます。データソースは、一般的に被検体内の対応するデータのVueの格納された状態
の成分Bを、それらがに応答する状態の内部に格納され、変更されたデータは、に依存している場合、ストアヴューコンポーネント、データストアからデータを読み出しますまた、更新が発生
グローバル状態mapStateゲッターによってマップと現在のアセンブリの特性を計算するために計算され、Cは、 - ゲッターは特性vuex
A、ゲッターは、状態計算動作に行うことができる、それは計算されたプロパティストアであり
、それはアセンブリのプロパティ内で計算することができるが、Bが、ゲッターは、複数のコンポーネント間で多重化されてもよい
一方のみで状態ならば、Cそれはゲッターことなく達成することができ、コンポーネント内で使用 - vuex特性の変異
ことを除いて処置同様の突然変異：アクションではなく、直接状態を変化させるよりも、送信突然変異であるアクションは、任意の非同期操作を含むことができます。
2.なぜVuexを使うのか？
従属ビューの複数の[]は同じ状態に、ネストされた多層アセンブリを使用してパラメータ渡しモードは非常に面倒であり、兄弟アセンブリとの間の状態を転送することができないであろう場合。
【同じステータスの異なるビューからの動作]を変更する必要があり、彼の息子がコンポーネントへの直接参照を使用して、またはイベントによって複数のコピーと同期ステータスを変更する際に、しばしば維持することは困難であるコードが生じます。
したがって、我々はグローバルシングルトンを管理するために、抽出された状態のコンポーネントを共有する必要があります。我々のコードは、より構造化し、保守が容易になりますように。一方、Vuexは、アクセスしてステータスを変更するために、適切なルールを開発します。
ルール：Vuexのみ変異によって状態を変更することができます。
3.どのような状況下でVuexを使用する必要がありますか？
あなたは、単純なアプリケーションを構築する場合、簡単なグローバルイベントバスで十分です。あなたが大規模な単一ページのアプリケーションへのメディアを構築する必要がある場合は、Vuexは自然な選択となります。
4. Vuex差とグローバルオブジェクト？
（1）Vuex状態メモリは応答します。状態変化場合、コンポーネントは、ストアからストアをVueの状態を読み取るとき、各成分は、それに応じて得られる効率的に更新します。
（2）あなたは、直接ストアの状態を変更することはできません。店舗のステータスを変更する唯一の方法は、明示的にコミット（コミット）変異です。そのように、我々は簡単にできる追跡すべての状態の変更をするだけでなく、デバッグに便利。
5. Vuexと差のlocalStorage？
ページを更新した場合（1）、Vuexすべてのデータがオフに初期化されます。
（2）のlocalStorage制御ページを長時間保存することができ、リフレッシュありません。
6.その他
Vuexも公式Vueのデバッグツールに統合することが私たちのデバッグを支援します。
これだけVueのために、によって達成Vuex Vueが応答。
まず、Vuexは何ですか
VuexはVue.jsアプリケーションの状態管理のために特別に開発されています。これは、予測可能な方法が変更さを保証するためにすべてのコンポーネント集中ストレージ管理アプリケーション、および対応する状態ルールのステータスを使用します。
Vuex Vueのも、公式試運転ツールデベロッパーツールの拡張機能に統合され、そのようなゼロコンフィギュレーションのデバッグ、インポートおよびエクスポートおよびその他の高度なデバッグ機能の状態のスナップショットとして、タイムトラベルが提供されます。
二、Vuex原則
我々は、アプリケーションの状態の共有複数の成分が発生する場合、一方向のデータフローの簡略化が容易に破壊される：
1、同じ状態が複数のビューに依存しています。
2、動作は同じ状態の異なるビューから変更する必要があります。
問題のために、ネストされたコンポーネントを渡すパラメータの方法は非常に面倒な、兄弟アセンブリとの間の状態を転送することができないであろう。質問2については、我々は多くの場合、イベントによって状態同期参照と複数のコピーを変更するには、直接彼の息子やコンポーネントを採用しています。これらのモデルのよりは頻繁に維持することができないコードになり、非常に脆弱です。
では、なぜ我々はそれを管理するグローバルシングルトンに抽出されたコンポーネントの状態を共有しませんか？このモードでは、我々は関係なく、ツリー内のどの位置の、巨大なコンポーネントツリー「ビュー」を構成し、任意のコンポーネントは、ステータスやトリガー動作を取得することができます！
また、概念や定義隔離管理の多様通って、一定のルールの遵守を強制し、我々のコードは、より構造化し、保守が容易になります。
これは、Vuexの基本的な考え方であるフラックス、Reduxの、そしてエルムアーキテクチャを描画します。これは、きめ細かいをする応答機構Vue.jsデータを効率的にステータスの更新を使用する状態管理データベースのために特別に設計Vuex Vue.js他のモードとは異なります。
示されているように、Vuexは、APIの呼び出しリングの開発など、Vueのコンポーネントの完全なエコシステムを確立しました。この生態系の周りの概要 プロセスと 各モジュールは、コアプロセスの主な機能です。
コアプロセス：
①Vueのコンポーネント私たちのVUEのコンポーネントは、コンポーネントはアクションの姿である、いくつかのイベントやアクションの（派遣）をトリガします。
私たちはアセンブリに送ら②アクションは、間違いなく取得したり、データを変更したいのですが、vuexでは、データが一元管理され、我々はデータを変更するために直接行くことができないので、このアクションはの変異に（コミット）に提出されます。
③その後、変異の変化（変異する）データの状態を行きます。
④状態データが変更された後、それが再描画されます（レンダリング）処理を完了するために、アセンブリ更新されたデータを示し、Vueのコンポーネントにアクセスしてください。
主な機能のコアプロセスの各モジュール。
コンポーネントのVue： Vueのコンポーネント。HTMLページ、ユーザの操作を受信するための責任の相互作用は、発送方法を実行し、応答で対応するアクションをトリガーします。
ディスパッチ：オペレーティング行動のトリガー方法は、アクションを実行することができる唯一の方法です。
アクション：運転行動処理モジュール。Vueのコンポーネントは、受信したすべての対話を処理するための責任。同期/非同期動作を含む、順番に登録の順序をトリガ同じ名前のメソッドをサポートします。トリガー他のアクションを含め、このモジュールでは上のバックエンドのAPI操作に要求し、操作変異を提出します。このモジュールは、チェーンをトリガしたアクションをサポートするための約束のパッケージが用意されています。
コミット：ステータスの変更は、法を犯します。突然変異に提出、それはの突然変異を実行するための唯一の方法です。
変異：ステータス変更の操作方法。唯一の推奨方法Vuexは、状態を変更して、他の変更は、strictモードでスローされます。このメソッドは、同期して動作することができ、およびメソッド名はグローバルに一意であることができます。操作の中でように状態を監視し、にさらされ、いくつかのフックがあるでしょう。
状態：ページ状態管理コンテナオブジェクト。中央データ・オブジェクトに格納されたVUE構成要素は、グローバルに一意な、統一状態管理データを散乱しました。ページは、効率的な更新を実行するためにきめ細かいデータ・ヴュー応答機構を使用して、被験者から読み出されたデータを表示するために必要。
ゲッター：ステートオブジェクトの読み取り方法。個別のモジュールに記載されていない図は、中のレンダリングに含まれるべきで、Vueのコンポーネントは、この方法により、グローバルな目標状態を読み出します。
Vuexを使用する必要がありますどのような状況の下で、サード
Vuexは、私たちが共有状態の管理を支援することができますが、それはまた、より多くの概念やフレームワークが付属していますが。これは、短期的および長期的な利益と比較考量する必要があります。
あなたは、大規模な単一ページのアプリケーションを開発する予定がない場合は、Vuexの冗長化を使用して面倒なことができます。それは確かにそうである-アプリケーションが十分に単純であれば、あなたはVuexを使用しないでください。あなたが必要とするシンプルなグローバルイベントバスは十分です。ただし、大規模な単一ページのアプリケーションで構築する必要がある場合、あなたはより良い状態外でコンポーネントを管理する方法を検討する可能性がある、Vuexは自然な選択となります。
四の違い、Vuexとグローバル変数
すべてのVuexアプリケーションの心臓部は、（倉庫）を格納することです。「ストア」基本的に、アプリケーションの状態（状態）のほとんどが含まれていた容器です。Vuex、純粋なグローバルオブジェクトは、以下の相違点を有している：
1、応答Vuex型の状態メモリ。状態変化場合、コンポーネントは、ストアからストアをVueの状態を読み取るとき、各成分は、それに応じて効率的に得られる更新されます。
2、あなたは直接ストアの状態を変更することはできません。店舗のステータスを変更する唯一の方法は、明示的にコミット（コミット）変異です。私たちは私たちがより良い私たちのアプリケーションを理解するのに役立ついくつかのツールを達成できるように、我々は簡単に、各状態の変化を追跡することができるように。
VuexとのlocalStorage、5の違い
Vuexは、一つの成分のデータ変化が間、このデータを使用して、他のコンポーネントにマップされ、コンポーネント間の間でのデータ共有の問題を解決するために、状態管理です。ページを更新する場合は、vuex以前に格納されたデータはすべてオフに初期化されます。
クッキーは、データを格納するために使用される前のlocalStorageは、H5によって提供されたデータを格納する簡単な方法ですが、クッキーのデータ量が小さすぎるので、私はのlocalStorageを使用し、それは、コントロールから自由にページを更新し、長期保存を5Mを制限することができます。
参考：
ジェーンの本- 簡単な例と要約を使用してvuexコンセプト
ジェーン・ブック- vuexの原則の簡単な理解
終わり