それぞれがこのすべてを使用します。$ STORE.STATE、これ。$ Store.getterおよび他の参考文献は、より多くのトラブル、コードの重複や冗長であるかどう状態、ゲッター、突然変異、アクション、時間のために、我々は助けることができますコードを生成するために私たちを助けるための機能、補助機能は、次の4つがあります。
国家取得するための、mapState（名前空間、マップ）
ゲッターを取得するための、mapGetters（名前空間、マップ）
の変異を取得するための、mapMutations（名前空間、マップ）
のアクションを取得するため、mapActions（名前空間、マップ）
補助機能のそれぞれは、2つのパラメータを取ることができます。
名前空間、モジュール名で名前空間、
マップ、情報を取得します
2つの方法でマップは、オブジェクトは、または文字列の配列（この時点で取得したと同じ名前の変数を設定）（キー名は、現在の変数設定のVue例の名前、変数の値は、店舗名から取得されるべきである）であってもよいです。
注：補助機能は、ルートノード店で注入する必要があります
PS：多くの初心者だけ補助機能を使用することができ、あなたもこの$のSTORE.STATE、この$のstore.getterこれらの用法を使用することができますかわからない....
これらの補助機能は、私たちができるオブジェクトを返します。我々は非常に書き込みを簡素化することができ、オブジェクトES6展開オペレータに合わせて、たとえば、：
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue @ 2.5.16 / DIST / vue.js」> </ スクリプト> < スクリプトSRC = "https://unpkg.com/[email protected]/dist/vuex.js" > </ スクリプト> </ ヘッド> < 身体> > < P > {{ない}} </ P > < P > {{NO}} </ P > < ボタン@click = "TEST1" >测试1 </ ボタン> < ボタン@click = "TEST2" >测试2 </ ボタン> </ DIV > < スクリプト> CONSTストア= 新しいVuex.Store（{ 状態：{NO：100 }、 ゲッター。{ 番号：関数（状態）{ 戻りstate.no + 100 } }、 変異：{ インクリメント（状態、ペイロード）{state.no + = payload.no;} }、 アクション：{ インクリメント（{コミット}、情報）{ のsetTimeout（機能（）{ コミット（' 増加' 、インフォ） }、500 ） } } }） のvar アプリ= 新しいヴュー（{ EL： }、" #app " 、 店舗、 計算：{ ... Vuex.mapState（[ ' いいえ' ]）、 ... Vuex.mapGetters（[ ' いいえ' ]） }、 メソッド：{ ... Vuex.mapMutations（[ ' インクリメント' ]）、 ... Vuex.mapActions（{increment1：" 増分" }）、 TEST1（）{ この.increment（{NO：100 }） TEST2（）{ この.increment1（{NO： 200 }） } } }） </ スクリプト> </ ボディ> </ HTML >
砂漠のQQ：22969969によって作家
私は属性で使用vuexは、より優れたビットた場合のみ、一つの状態が同様にこれを使用する可能性がある場合はそれを得るために$ STORE.STATE。、それを感じて、結局、ノード環境でも{インポートする必要がありmapState "から}エクスポートされたシンボルを取得するvuex」、あなたはページの特定のニーズが右の方法を選択して見ることができます。
ソースコード解析
次のように同じフォーマットvuexのすべての補助機能は、mapState例では、匿名関数を渡し、二つのパラメータ、すなわち、名前空間と地図匿名関数をnormalizeNamespace（）関数を実行しています。
VAR mapState = normalizeNamespace（機能（名前空間、アメリカ）{ // ステートヘルパー名：名前空間は述べている：例えば：COUNT2： "COUNT" のvar RESの= {}; normalizeMap（アメリカ）.forEach（機能（REF）を{ // 例えば、オブジェクトのフォーマットを変換する状態：[{キー：COUNT2、ヴァル：COUNT}] VaRの主要= ref.key; VAR valは= ref.val; [キー] RESは = 関数（mappedStateを）{ // 属性に対応する計算関数は、Vueの例内のこの関数が向けられている VaRの状態= この。$のSTORE.STATE。 // 获取状態对象の VARのゲッター= この $ store.getters。 // 获取ゲッター对象 場合（名前空間）{ VARモジュール= getModuleByNamespace（この $ストア、 'mapState'。 、名前空間）。 もし（！モジュール）{ リターン } 状態 = module.context.state。 ゲッター = module.context.getters。 } 戻り typeof演算===ヴァル「関数」 val.call（？この、状態、ゲッタ） // 状態が論理関数である、取得サブモジュールは、ここで状態を実行 ：状態[ヴァルは】 // また、[ヴァル]状態を返します値である }; // デベロッパーツールのためのマークvuexゲッター RES = .vuex [キー] 真に; }）; 戻りRESを }）。
次のようにnormalizeNamespaceは、すべての補助機能の統一エントリ・フォーマットです。
関数 normalizeNamespace（Fnが）{ // 無名関数はパラメータを省略することができる、それぞれ2つのパラメータを取り、およびマッピングの名前空間を返す リターン 機能（名前空間、マップ）{ IF（typeof演算の名前空間を！==「文字列」）{ / / パラメータ1が文字列（すなわち、名前空間を無視して）いない場合は 地図=名前空間; // 補正パラメータは、1マップで 、名前空間=「」; //は、名前空間のヌルをリセット } 他 のIF namespace.length（namespace.charAt（ ！ - 1）== '/' ）{ 名前空間 + = '/' ; } リターンFN（名前空間、マップ） // 最後に行わ関数fn } }
いくつかの他の補助機能が類似している、それは、パスnormalizeNamespace内のわずかに異なる機能を達成することです。