細切りVUE源(2):下地vuexの実装

VUE LET; // VUEのコンストラクタ

  // モジュール:{ 
  //    状態:. 1、
  //    モジュール:{ 
  //      A:{ 
  //        状態:2 
  //      } 
  //      B:{ 
  //        状態:. 3 
  / /      } 
  //    } 
  // } 
クラスModuleCollection { 
  コンストラクタ(オプション){ 
    この.register([]、[オプション]); 
  } 
  // 深さ優先トラバーサル
  レジスタ(パス、rootModule){
     // 1、新たなサブモジュール定義。 
    LET = NewModule { 
      _raw:rootModule、
      _children:{}、 
      状態:rootModule.state
    } 
    // 2、マウントモジュールのルート
    IF(path.length === 0 ){
       この .Root = rootModule 
    } 
    // 。6、サブマウントモジュール、モジュールは、対応する親ノードにこの時間を横断するように取り付けられていますこの再帰は、歩行開始場合に、第2のパスが決定
    IF(path.lengthを!= 0 ){
       // 。7、配列経路に応じて、この時間は、対応する親ノードrootModuleを見つけるために、 
      親= path.sliceせて(0、-1 ).reduceを((ルート、現在)=> {
         戻りroot._children [現在]; 
      } この.Root);
       // 8は、親ノードに取り付け 
      parent._children [パス[path.length - 1]] = NewModule; 
    } 
    // 3、サブモジュールがあるかどうか照会
    場合(rootModule.modules){
       // 。4、サブモジュール横断 
      のforEach(rootModule.modules、(moduleNameの、Module1の)=> {
         // 。5、サブモジュール再帰プロセス
        この.register(path.concat(moduleNameの)モジュール); 
      })
    } 
  } 
} 

クラスストア{ 
  // オプションに渡されたユーザーは、私たちの最初のタスクは、その範囲を保存するためにバインドされたプロパティとメソッドのオプションにある
  コンストラクタ(オプション){
     // 最初の結合状態属性
    この ._s = 新しい新しいヴュー({ // 対応する応答リフレッシュのデータ状態監視、リアルタイムビュー追加する
      データ:{ 
        状態:options.state 
      } 
    })

    新しい新しい ModuleCollection(オプション); //レベルデータは、ソート
    //計算された等価ゲッター 
    LET || options.gettersゲッター= {}
     この .getters = {};
     // 結合すること、次いで、各ゲッター特性this.getters方法着信状態が自動的にこれらの方法を実施している、に 
    オブジェクト。キー(ゲッター).forEach((getterName => { 
      Object.defineProperties(この.getters、getterName、{
         // 関数ロック矢印本明細書でこのコンテキストを使用するには、発信者の変更は、この変更する防ぐ 
        GET()=> {
           リターンゲッター[getterName](この.STATE); 
        } 
      })
    }))
    
    // 変異の対応方法に 
    LET || options.mutations変異= {}
    この .mutations =} {; 
    Object.keys(突然変異).forEach(mutationName => {
       // インスタンス属性this.mutationsに結合した変異のプライベート属性の方法
      この .mutations [mutationName] =(PRELOAD)=> {
         //はプライベート行います突然変異の特性に対応する方法 
        の突然変異[mutationName](この.STATE、PRELOAD); 
      } 
    })
  } 
  // ユーザーエントリ呼び出し 
  コミット=(タイプ、ペイロード)=> {
     この.mutations [タイプ](ペイロード); 
  } 
  / / 取得することができ、セットアクセス制御状態
  GET状態(){
     戻り 、この._sを
  } 
} 

インストールCONST =(_Vue)=>  { 
  ヴュー = _vue; 
  Vue.mixin({ 
    // 混合ライフサイクル宣言オブジェクト、各ストアコンポーネントが作成する前に添加
    beforeCreate(){
       // ストアがサブアセンブリ親要素を入れている場合、分析親要素又はサブアセンブリをサブアセンブリ合格
      IFこれ。オプション$ && これ。options.store $){
         この。$ =ストアこれ。options.storeの$ 
      } {
         この。$ =ストアこれ。$親&& これ。$親。$ストア
      } 
    } 
  })
} 

エクスポートデフォルト{ 
  インストール、   //モジュールが導入されvue.use方法、呼び出しのデフォルトの方法は、モジュールのインストール
  ストアを
}

 

おすすめ

転載: www.cnblogs.com/jiangxiaoxi/p/12617227.html