詳細vuex源解析（c）はゲッタープロパティ

時には私たちは、次のようないくつかの州、中の状態にある店舗から派生する必要があります。

< DIV ID = "アプリ" > 
    < P > {{reverseMessage}} </ P > 
</ divの> 
< スクリプト> 
    constの店=  新しいVuex.Store（{ 
        状態：{reverseMessage：' ！こんにちはヴュー' } 
    }）
    新しいですヴュー（{ 
        エル：' #app ' 、
        店舗、
        計算された：{ 
            reverseMessage：機能（）{ 返す これを$ store.state.reverseMessage.split（。""）.reverse（）。ジョイン（'' ）} 
        } 
    }）
</ スクリプト>

このプロパティに複数のコンポーネントを使用する必要がある場合、我々は---この機能をコピー、または共有機能に引き込まれ、その後、多くの場所で、それをインポートするいずれかのいずれかの方法は非常に満足のいくものではありません

砂漠のQQ：22969969によって作家

Vuexがキャッシュされているその依存関係に基づいて、プロパティ、ゲッター戻り値として計算されるように、私たちは、（ストアのプロパティを計算することが考えられる）ストアで「ゲッター」を定義することができ、その値が変更されたときにのみのみ依存していますこれは、再計算されます

匿名関数を対応する各ゲッターは、4つのパラメータ、例えばつまり現在のモジュールの状態、ルート状態ゲッターモジュール、ゲッターをとることができます。

< DIV ID = "アプリ" > 
    < P > {{reverseMessage}} </ P > 
</ divの> 
< スクリプト> 
    constの店=  新しいVuex.Store（{ 
        状態：{reverseMessage：' ！こんにちはヴュー' }、
        ゲッター： { 
            reverseMessage：機能（状態）{ 戻りstate.reverseMessage.split（'' ）（.reverse を（）に参加。'' ）;} 
        } 
    }）
    新しいヴュー（{ 
        EL："#app ' 、
        店舗、
        計算：{ 
            reverseMessage：関数（）{ 戻り 、この$ store.getters.reverseMessageを}。
        } 
    }）
</ スクリプト>

このような内部vuexは入れreverseMessageをこのプロパティが達成されるように、または良い使用、公式ウェブサイトは、私たちが実際に内部vuexが計算プロパティのゲッターVUE計算として定義され、使用するゲッターとして同じ属性を計算することができます言うvuex達成。

ソースコード解析

Vuex.Store（）を作成するinstallModule（）ルートモジュールの初期化をインストールし、次のように関連するゲッタリングするために実行されます。

関数 installModule（ストア、rootState、パス、モジュール、ホット）{     // モジュールのインストール
  / * 若干* / 
  module.forEachGetter（関数（ゲッタ、KEY）{                      // このトラバースモジュールモジュールゲッターをオブジェクト、見つかった場合、実装1つの匿名関数パラメータ：各ゲッターキーの値：名に対応するキー
    のvarキーnamespacedTypeネームスペース= +;                              //は、例えば、ネームスペース+キーをまとめ：/ computedCount 
    registerGetter（ストア、namespacedType、ゲッター、ローカル）;              // 順次実行registerGetter 
  }）; 

  / * スキップ* / 
}

registerGetterは次のように、各ゲッターを登録するために使用しました：

関数 registerGetter（タイプの店、rawGetter、ローカル）{          // ゲッターを登録し
  たIF（[タイプの] store._wrappedGetters）{                                 // store._wrappedGetters下キーすでに存在する場合は
    、{ 
      console.errorは（（「[vuex]ゲッターキーを複製：「+型））;         // 反復可能にしないエラー、
    }
     戻り
  } 
  store._wrappedGetters [タイプ] = 関数 wrappedGetter（ストア）{     // store._wrappedGettersに対応するタイプを保存
    返す rawGetter（                                                  //はストアを行います4つのパラメータは、ローカル状態の関数、ローカルゲッター、ルート状態であり 、ルートゲッター
      local.state、// ローカル状態 
      local.getters、// ローカルゲッターの 
      STORE.STATE、// ルート状態 
      store.getters // ルートゲッタ
    ）
  }。
}

だから、店。は_WrappedGettersまで対応するgetterを格納し、無名関数で、関数のパラメータは、ストアがあり、これはvuex.store（）のインスタンスがあり、そしてVUEインスタンスが作成されたときに渡されますので、geterあなたは、国家とゲッターのルートモジュールにアクセスできる場所

ここでの例には、対応して行わ_wrappedGettersに従います。

最後Vuexは、Vueのインスタンスを作成するためにresetStoreVM（）を行って、次のようにゲッター関連のロジックは次のとおりです。

  関数 resetStoreVM（店舗、州、ホット）{            // 新たに記憶されたデータ
    VAR oldvm = store._vm; 

    // バインドストアパブリックゲッターの 
    store.getters = {};
     VAR wrappedGettersの=のstore._wrappedGetters;                // 取得ゲッター店情報上記のデータが格納され、各値は、匿名関数である
    VAR ;計算= {}                                         // 最終的な計算されたプロパティを格納するための 
    forEachValue（wrappedGetters、関数（FN、KEY）{          // 反復のwrappedGetters 
      // に計算使用キャッシング機構ITSレイジー活用 
      計算[キー] = 関数（）{ リターンのFn（店舗）;};         // 計算[キー] geterルートモジュールがアクセスできるように、店舗のパラメータが渡され、結果の関数式、内部戻りのFn（）の実装のように定義されますそしてゲッターの状態 
      Object.defineProperty（store.getters、キー、{                // アクセスプロパティキーをstore.gettersを設定し、store.getters.aaaさによって特定の値になるようにアクセス 
        GET：関数（ ）{ 戻りstore._vm [キー];} 
        列挙：trueに // ローカルゲッター用
      }）; 
    }）; 

    / * スキップ* / 
  }

あなたが内部情報の後の状態を変更した場合、情報におけるゲッターは自動的に更新され、Vueの応答の設計には、このおかげされます。

詳細vuex源解析（c）はゲッタープロパティ

おすすめ