current position:Home>How to implement injection in vuex source code?

How to implement injection in vuex source code?

2021-08-22 05:14:03 Front end blackboard newspaper

Vuex What is it? ?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Vuex Is a special for Vue.js State management mode of application development . It USES centralized storage to manage the state of all components of the application , And the corresponding rules ensure that the state changes in a predictable way .

A library 、 The emergence of the framework must be to solve a certain problem ,Vuex No exception , It mainly solves the following two problems :

  • Multiple views depend on the same state .
  • Behaviors from different views need to change the same state .

It is to extract the shared state of components , Manage in a global singleton mode . Schematic diagram is as follows :

Of course Vuex Certainly not for all scenarios , Because it brings some of its own concepts :State、Getters、Mutations、Actions、Modules . If your project is simple enough , It is recommended not to use Vuex.

Source code analysis

We from Vuex Start with the use of :

initialization :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Inject... From the root component store:

new Vue({
  el: '#app',
  store: store,
})

As can be seen from the above, it is through Vue.use To use Vuex the Vue.use What is it? ? The main function is to use Vue Of the plug-in . Source code is as follows :

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    //  Prevent many times  use
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    //  according to  plugin  Different types perform different logic .1. When the object , Then execute its intall  Method ,2. plugin  Function is executed directly 
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

that Vuex Since it's through Vue.use Called , that Vuex Is to meet the call conditions , Look at the source ( 2.4.0 edition ):

let Vue;

class Store{
    ...
}

function install(_Vue){
  //  This is also to prevent multiple calls  Vue.use   
  if (Vue) {
    console.error(
      '[vuex] already installed. Vue.use(Vuex) should be called only once.'
    )
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}

The source code does include install Method , It's very simple, just calling applyMixin Method :

export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    // Vue 2.x  Use  mixin  Method   hold  vuexInit  Mix in  beforeCreate  In the hook   
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    ...
  }

  function vuexInit () {
     ...
  }
}

See from the install Methods according to the Vue Different versions , Use different methods to put vuexInit Mix into components ,Vuex The use of is to instantiate store Put... In the form of options Vue In the root component , How did the subcomponent get store What about ? Then rely on vuexInit 了 :

function vuexInit () {
    const options = this.$options
    
    if (options.store) {
      //  Inject into the root component   
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      //  Child components  $store  Reference to the parent component  $store  Form a chain , Ensure that all use the same  store  object .  
      this.$store = options.parent.$store
    }
  }

The above code mainly distinguishes how the root component and sub component obtain store Object's . thus Vuex That's how it's injected into all the components .

Welcome to my work ?

This article is from WeChat official account. - Front blackboard newspaper (FeHeiBanBao)

The source and reprint of the original text are detailed in the text , If there is any infringement , Please contact the [email protected] Delete .

Original publication time : 2021-07-28

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

copyright notice
author[Front end blackboard newspaper],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822051339340E.html