“This is the 12th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

import { forEachValue, isObject, isPromise, assert, partial } from './util'
Copy the code

To recap, applyMixin is used to inject store forEachValue into the vue root instance. Partial is used to iterate over objects or arrays. Partial is an internal function that binds partial scopes.

Interpretation of some internal tool functions

  • The enableStrictMode method, one argument to watch as a function returns this._data.$$state. Whenever this state changes, the callback function is triggered. Turning on strict mode checks whether the warehouse is in committed state when changing state. Assert is a general assertion function.
  • GetNestedState gets the nested state. Its input parameter is the state state, which is the initial value of the Reduce statistical function.
  • Path is an array of states, and a collection of those states is returned.
  • UnifyObjectStyle Unified object format. What it does is convert a data structure into the data structure required by VUEX.
function makeLocalGetters (store, namespace) {
  if(! store._makeLocalGettersCache[namespace]) {const gettersProxy = {}
    ...
    Object.keys(store.getters).forEach(type= > {
      Object.defineProperty(gettersProxy, localType, {
        get: () = > store.getters[type],
        enumerable: true
      })
    })
    store._makeLocalGettersCache[namespace] = gettersProxy
  }
}
Copy the code

Proxy mode optimizes performance

  • MakeLocalGetters accepts store and namespace parameters. If there is a cache for the namespace argument, it returns it directly.
  • If not, the state is obtained through the proxy object.
  • A namespace is a combination of a module name and a state name, which localType gets. Instead of getting the state directly from store.getters, you get the state from a proxy object. In this way, space is exchanged for time. If object. keys is used for each state search, the application state search performance will become worse and worse as more and more application states are searched.
  • Lookup performance is optimized by proxy mode, which only does the operation on the first value.

Space for time

The combination of a function bound with references to its surrounding state (lexical environment) (or the function surrounded by references) is called a closure (MDN)


function registerMutation (store, type, handler, local) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler (payload) {
    handler.call(store, local.state, payload)
  })
}

Copy the code
  1. Both the registerMutation and registerAction functions receive store, change type (type), handler handler, and current module parameters.
  2. Vuex provides module functionality that provides an API for code structure organization, similar to Redux’s optimized DVA, which can be found by readers themselves.
  3. Vuex’s store has two private variables, _mutations and — Actions, that use Type to find the corresponding processor and execute it.
  4. Both of them bind a type to a particular type handler in the form of a closure, which is a space-for-time lookup strategy.

This section mainly explains the tool functions in Vuex Store. In vUE bucket, there are many optimization techniques like proxy mode and closure. Through space for time and other methods, we can apply them appropriately in our projects to improve the code performance. Thanks for reading, the next section of Store will be a complete interpretation of the store process, if you are inspired, welcome to like, welcome to follow.