vuex source parsing (c) getter property Detailed

Sometimes we need to derive from the store in the state in some states, such as:

<div id="app">
    <p>{{reverseMessage}}</p>
</div>
<script>
    const store = new Vuex.Store({
        state:{reverseMessage:'Hello Vue!'}
    })
    new Vue({
        el:'#app',
        store,
        computed:{
            reverseMessage:function(){return this.$store.state.reverseMessage.split('').reverse().join('')}
        }
    })
</script>

If you need to use multiple components to this property, we either copy this function, or drawn into a shared function and then import it in many places --- either way are not very satisfactory

writer by: Desert QQ: 22969969

Vuex allows us to define "getter" in the store (can be considered to calculate the properties of the store), as calculated as property, getter return value based on its dependencies are cached, and only when its value has changed only rely It will be recalculated

Each getter corresponding anonymous function can take four parameters, namely the state of the current module, and root state getter modules, getter, for example:

<div id="app">
    <p>{{reverseMessage}}</p>
</div>
<script>
    const store = new Vuex.Store({
        state:{reverseMessage:'Hello Vue!'},
        getters:{
            reverseMessage:function(state){return state.reverseMessage.split('').reverse().join('');}
        }
    })
    new Vue({
        el:'#app',
        store,
        computed:{
            reverseMessage:function(){return this.$store.getters.reverseMessage}
        }
    })
</script>

Such internal vuex put reverseMessage this property to be achieved, or good use, vuex official website says we can calculate the same attributes as a getter to use, in fact internal vuex is defined as the getter vue calculation of computed properties achieved.

 

Source code analysis

---

 Creating Vuex.Store () performs installModule () to install root module initialization, and getter related as follows:

function installModule (Store, rootState, path, module, Hot) {     // install modules 
  / * slightly * / 
  module.forEachGetter ( function (getter, Key) {                      // traverse module module getters object, if found, then the implementation of this 1 anonymous function parameters: the value of each getter key: the key corresponding to the name 
    var namespacedType namespace = + key;                              // put together namespace + keys, for example: a / computedCount 
    registerGetter (Store, namespacedType, getter, local);              // sequentially performing registerGetter 
  }); 

  / * skip * / 
}

 registerGetter used to register each getter, as follows:

function registerGetter (Store, of the type, rawGetter, local) {          // Register getter 
  IF (store._wrappedGetters [of the type]) {                                 // If there is already a key under store._wrappedGetters 
    { 
      console.error (( "[vuex] Duplicate getter key : "+ type));         // the error, which does not allow repeated 
    }
     return 
  } 
  store._wrappedGetters [type] = function wrappedGetter (store) {     // save the corresponding type in store._wrappedGetters 
    return rawGetter (                                                  // perform store four parameters are a function of local state, local getters, root state , root getters
      local.state, // local state
      local.getters, // local getters
      store.state, // root state
      store.getters // root getters
    )
  };
}

So Store. _WrappedGetters up storing the corresponding getter, and is an anonymous function, a function parameter is the store, this is an instance of vuex.store (), and will be passed when a vue instance is created, so geter where you can access to the root module of the state and getters

Examples here performed corresponding _wrappedGetters follows:

The last Vuex went resetStoreVM () to create a Vue instance, and getter related logic is as follows:

  function resetStoreVM (store, State, Hot) {            // newly stored data 
    var oldvm = store._vm; 

    // the bind store public getters 
    store.getters = {};
     var wrappedGetters = store._wrappedGetters;                // Get getter store all information , the above data is stored, each value is an anonymous function 
    var computed = {};                                         // for storing a final calculated property 
    forEachValue (wrappedGetters, function (Fn, Key) {          // iterate wrappedGetters 
      // use computed to Caching mechanism ITS the lazy-leveraged 
      computed [Key] = function() { Return Fn (store);};         // The computed [key] is defined as a function expression, inner return Fn () implementation of the results, store parameters passed, so that there can access to geter root module and the state of getters 
      Object.defineProperty (store.getters, key, {                // access properties set store.getters the key, so that access to a specific value by store.getters.aaa 
        GET: function ( ) { return store._vm [Key];}, 
        Enumerable: to true  // for local getters 
      }); 
    }); 

    / * skip * / 
  }

If you have modified the state after inside information, getter in information will be updated automatically, and this thanks to the responsive design of the Vue.