This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Implementation of the install function

When we use vuex, we use vue.use(vuex). How is this implemented?

  1. Vue plug-in system, provides the use function, convenient for us to introduce plug-ins
  2. The use function specifies that each plug-in needs to write the install function, which vuex provides in store.js
// _vue is a global variable used to receive vUE
// Plugins are easy to use, just use Plugins (vue.use). How is this implemented in VUE?
If you know about vue, you should know that use() receives an install method, which is defined by the plug-in developer.
// Finally reach the global registry component.
export function install(_Vue) {
  // Determine that the plug-in has been introduced. Prevent repeated introductions. In fact, vue. Use will also judge when installed
  if (Vue && _Vue === Vue) {
    if(process.env.NODE_ENV ! = ='production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.')}return
  }
  // If not, call applyMixin(). This method is located at mixin.js
  Vue = _Vue
  applyMixin(Vue)
}
Copy the code

The install function calls applyMixin(). This method is located in mixin.js

// Run the vuexInit method to initialize Vuex

Vue1.0 and vue 2.0 are treated differently here
// Vue1.0, Vuex will put the vuexInit method in the _init method of Vue,
Vue2.0 will confuse vuexinit with the beforeCreate hook of Vue.
export default function (Vue) {
  // Get the vue version
  const version = Number(Vue.version.split('. ') [0])
  // If the vue version is greater than 2, call vuexInit directly and place it in the beforeCreate hook
  if (version >= 2) {
    // Add vuexInit before component creation using the mixin method
    Vue.mixin({ beforeCreate: vuexInit })
  } else {

    // Rewrite init to put vuexInit in init
    // Put vue.prototype. _init in constants to prevent changes
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  // In vuexInit, set the store passed in when new Vue() to the $store property of this object, //
  / /!!!!!!
  // Note that vuexInit is called before the component is created, because each component is rendered and mixed in with mixins.
  // Vue renders components by rendering the parent component first before rendering the child component, depth first.
  // Store passed in when new Vue() is already hanging on the root component at the top.
  $store = $store = $store = $store = $store = $store = $store = $store
  // By registering the Store option in the root instance, the store instance is injected into all the children of the root component by taking the child from the parent and the root from options.
  function vuexInit() {
    $options. Methods (vm.$options. Methods);
    const options = this.$options
    // If new Vue() is passed to store
    // If it is the parent
    if (options.store) {
      // Attach store to this, vue
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      // If a component has a parent component and the parent component has $store, mount $store to that component as well
      this.$store = options.parent.$store
    }
  }
}

Copy the code