current position:Home>Install function in Vue

Install function in Vue

2021-08-27 07:26:07 Cherry dance

This article has participated in the third phase of nuggets creators training camp 「 High yield Gengwen 」 Track , View details : Project digging | The third phase of the creator training camp is under way ,「 Write 」 Personal influence .

install Implementation of function

We are using vuex The time is vue.use(vuex), How is this realized ?

  1. vue The plug-in system , Provides use function , It is convenient for us to introduce plug-ins
  2. use The function specifies , Every plug-in needs to write install function ,vuex stay store.js Provided in install function
//  there _vue Is a global variable , For reception vue
// vue The way to use plug-ins is simple , just Vue.use(Plugins) You can use the plug-in . stay vue How is China realized ?
//  understand vue Words , You should know ,use(), Receive one install Method , This install Defined by the plug-in developer .
//  Finally, the global registration component .
export function install(_Vue) {
  //  Judge that plug-ins have been introduced . Prevent repeated introduction . Actually in vue.use It will also judge that the time has been installed 
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
  //  If there is no introduction , call applyMixin(). This method is located at mixin.js
  Vue = _Vue
 Copy code 

install Function call applyMixin(). This method is located at mixin.js

//  perform vuexInit Method initialization Vuex

//  Targeted here Vue1.0 And 2.0 Different treatments were carried out 
// Vue1.0,Vuex Will vuexInit Method put Vue Of _init In the method ,
// Vue2.0, Will be vuexinit Confusion into Vue Of beforeCreate In the hook .
export default function (Vue) {
  // obtain vue Version of 
  const version = Number(Vue.version.split('.')[0])
  //  If vue The version of is greater than 2 Words , Call directly vuexInit Put in beforeCreate In the hook 
  if (version >= 2) {
    //  Use mixin Method , Add... Before component creation vuexInit
    Vue.mixin({ beforeCreate: vuexInit })
  } else {

    //  rewrite init, take vuexInit Put in init in 
    //  The first Vue.prototype._init Stored in constants , Prevent changes 
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit, options)

  //  stay  vuexInit  in , take  new Vue()  When it came in  store  Set to  this  Object's  $store  Attribute ,//
  // !!!
  //  Be careful , Because every component is rendered , Use on top mixin Mixed , therefore vuexInit It will be called before the component is created .
  // vue The method of rendering a component is to render the parent component before rendering the child component , Depth first .
  // new Vue()  When it came in  store, This is the time ,store Already hanging on the top root( root ) Components .
  //  A child component references its parent component  $store  Property is nested layer by layer , Ensure that every component can pass  this.$store  Fetch  store  object .
  //  By registering in the root instance  store  Options , The  store  The instance is injected into all the child components under the root component , The injection method is that the son takes... From the father ,root from options take .
  function vuexInit() {
    // vue  An instance property provided , Used to obtain Vue Custom properties of the instance ( Such as vm.$options.methods, obtain Vue Custom properties of the instance methods)
    const options = this.$options
    //  If  new Vue()  When it came to  store 
    //  If itself is the parent component 
    if ( {
      //  Will store Hang on to this On , That is to say vue On 
      this.$store = typeof === 'function'
    } else if (options.parent && options.parent.$store) {
      //  If a component has a parent component , And the parent component exists $store, Then mount the component $store
      this.$store = options.parent.$store

 Copy code 

copyright notice
author[Cherry dance],Please bring the original link to reprint, thank you.

Random recommended