Shredded VUE source (2): The implementation of the underlying vuex

Vue the let; // constructor of vue 

  // modules: { 
  //    State:. 1, 
  //    modules: { 
  //      A: { 
  //        State: 2 
  //      }, 
  //      B: { 
  //        State:. 3 
  / /      } 
  //    } 
  // } 
class ModuleCollection { 
  constructor (Options) { 
    the this .register ([], Options); 
  } 
  // depth-first traversal 
  Register (path, rootModule) {
     // . 1, a new sub-module defined 
    let = NewModule { 
      The _raw: rootModule,  
      _children: {},
      State: rootModule.state 
    } 
    // 2, the root of the mount module 
    IF (path.length === 0 ) {
       the this .Root = rootModule 
    } 
    // . 6, sub-mount module, the module at this time to traverse the mount corresponding to the parent node, if the second time is determined recursively starts walking 
    IF (path.length! = 0 ) {
       // . 7, according to the array path, this time to find the corresponding parent node rootModule 
      let parent = path.slice (0, -1) .reduce ((the root, Current) => {
         return root._children [Current]; 
      }, the this .Root);
       // . 8, mounted to the parent node 
      parent._children [path [path.length - 1] ] = NewModule; 
    } 
    // . 3, sub-module queries whether 
    if (rootModule.modules) {
      // 4, traversing submodule 
      forEach (rootModule.modules, (moduleName, Module1) => {
         // . 5, the sub-module recursive process 
        the this .register (path.concat (moduleName), Module1); 
      }) 
    } 
  } 
} 

class Store { 
  // user passed in options, our first task is to options in the properties and methods bound to store their scope 
  constructor (options) {
     // first binding state attribute 
    the this ._s = new new VUE ({ // to add data state monitoring, real-time view of the corresponding response refresh 
      data: { 
        state: options.state 
      } 
    }) 

    new new ModuleCollection (Options); // data hierarchical sorting 
    //getters equivalent computed 
    the let || options.getters getters = {}
     the this .getters = {};
     // then the respective getters properties this.getters method to bind to, the incoming state is automatically implementing these methods 
    Object. Keys (getters) .forEach ((getterName => { 
      Object.defineProperties ( this .getters, getterName, {
         // used herein this context arrow locking function, prevent the caller changes make this change 
        GET: () => {
           return getters [getterName] ( the this .STATE); 
        } 
      }) 
    })) 
    
    // mutations corresponds to the Method 
    the let || options.mutations mutations = {}
    the this  .mutations ={}; 
    Object.keys (mutations) .forEach (mutationName => {
       // the method of the private attributes of mutations bound to the instance attribute this.mutations 
      the this .mutations [mutationName] = (PRELOAD) => {
         // perform the method of the private attributes corresponding mutations 
        mutations [mutationName] ( the this .STATE, PRELOAD); 
      } 
    }) 
  } 
  // user entry calls 
  the commit = (type, payload) => {
     the this .mutations [type] (payload); 
  } 
  // can get, set access control state 
  GET state () {
     return  the this ._s 
  } 
} 

const the install= (_Vue) =>   { 
  Vue = _vue; 
  Vue.mixin ({ 
    // declare object lifecycle mixed, added before each store component creates 
    beforeCreate () {
       // Analyzing parent component or subassembly, the subassembly if put the store passed subassembly parent element 
      IF ( the this . Options $ && the this . options.store $) {
         the this . = $ store the this . options.store $ 
      } the else {
         the this . = $ store the this . $ parent && the this . $ parent. Store $ 
      } 
    } 
  }) 
} 

Export default { 
  the install,   //vue.use method when the module is introduced, the default method of invocation install module 
  Store 
}