Source code analysis of vuex -- register store instance object

source code analysis vuex register


How to use Vuex

Although we are very concerned about how to use Vuex No stranger , But in the analysis of how the source code is registered store Before , Let's just review .

  1. install vuex :npm install vuex --save

  2. stay vue In the project src Create under directory store Catalog , And create a new file in this directory ——index.js, Used to create store example .

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // install Vuex plug-in unit 
const state = {}
const mutations = {}
const actions = {}
const getters = {}
// establish store Instance object and export . Just for example , Just define some empty objects .
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
 Copy code 
  1. stay main.js Import... Into the entry file
import Vue from 'vue'
import App from './App.vue'
import store from './index'
new Vue({
el: '#app',
// hold store The object is provided to “store” Options , This can store All the subcomponents are injected with the instance of 
store,
render: h => h(App)
})
 Copy code 

After review , Everyone must have an impression , Let's get down to business .

register store

Have used Vuex All the students know that :Vuex adopt store Options , Provides a mechanism to move state from the root component “ Inject ” Into each subcomponent ( Need to call Vue.use(Vuex)). And by registering in the root instance store Options , The store The instance is injected into all the child components under the root component , And the child component can pass this.$store Access to the .

To understand the principle , We need to know Vue.use .

Vue.use Definition

Quoted from the official definition :

install Vue.js plug-in unit . If the plug-in is an object , You must provide install Method . If the plug-in is a function , It will be used as install Method .install Method call , Will Vue Pass in as a parameter .

This method needs to be called new Vue() Called before . When install Method is called multiple times by the same plug-in , The plug-in will only be installed once .

From the definition above , It's not hard for us to understand . To install Vue plug-in unit , The plug-in must provide install Method or itself is a function . therefore , We are using Vue.use(Vuex) install Vuex When the plug-in , It's actually calling its internal install Method .

Vue.use Method

Vue.use yes vue Methods defined in source code , For installation Vue plug-in unit .

export function initUse (Vue: GlobalAPI) {
// plugin It's an object or a function 
Vue.use = function (plugin: Function | Object) {
// Define the array variables that store plug-ins 
const installedPlugins = (this._installedPlugins || (this._installedPlugins =
[]))
// Judge vue Have you registered this plug-in 
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// toArray, yes vue A tool method defined in the source code 
// toArray(arguments, 1) Will be able to arguments( An array of class ) Converted to an array , At the same time, I will put 
// Except for the first parameter ( Plug in plugin) All the other parameters are stored in an array .
const args = toArray(arguments, 1)
// take vue Object inserted into args The first bit of the array 
args.unshift(this)
// Determine whether the plug-in has install Method .
// If there is , call install Method and pass the parameter array into , change this The pointer is the component 
// without , Call directly , change this Pointer for null
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
// take plugin Add to installedPlugins Array , Used to check whether this plug-in has been installed 
installedPlugins.push(plugin)
return this
}
}
 Copy code 

toArray Method

toArray yes vue A tool method defined in the source code .

// Convert an array like object to a real array 
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
 Copy code 

from Vue.use We can see in the source code of :plugin if 'object', Call the install Method , if 'function', And regard yourself as install Method call . Now? , I think we have sorted it out Vue.use Source code implementation , Next , Namely Vuex Exposed in the source code install The method .

Vuex Medium install

install The core of the method is to call applyMixin Method .

// stay Vuex File path in :src/store.js
export function install(_Vue) {
// Avoid re installation 
if (Vue && _Vue === Vue) {
if (__DEV__) {
console.error(
// vuex Already installed .Vue.use(Vuex) It should only be called once .
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
// First load , take _Vue A variable is assigned to Vue, And it is used to detect whether the installation is repeated 
Vue = _Vue
// applyMixin Yes, it will store The key of instance injection into all the subcomponents under the root component is 
applyMixin(Vue)
}
 Copy code 

applyMixin

applyMixin, Real implementation will store Instance injection into all the subcomponents under the root component . Also on vue1.0 and 2.0 Version has been treated differently .

// stay Vuex File path in :src/mixin.js
export default function (Vue) {
const version = Number(Vue.version.split('.')[0]) // obtain vue Version number 
if (version >= 2) {
// Vue.mixin Global registration of a hybrid , Affects every... Created after registration Vue example .
// Plug in authors can use mash in , Inject custom behavior into components . Not recommended in application code .
// take vuexInit Mix in Vue Of beforeCreacte In the hook .
// such , It will be in every Vue Execute... In the instance vuexInit Method .
Vue.mixin({
beforeCreate: vuexInit
})
} else {
// Override initialization and inject vuex Initialization process 
const _init = Vue.prototype._init
Vue.prototype._init = function (options = {}) {
options.init = options.init ? [vuexInit].concat(options.init) : vuexInit
_init.call(this, options)
}
}
// Vuex Initialization hook , Injected into the list of initialization hooks for each instance 
function vuexInit() {
const options = this.$options
// store Inject , if options.store There is , Then the current component is the root component , Otherwise, it is a sub component 
if (options.store) {
this.$store = typeof options.store === 'function' ?
options.store() : options.store
} else if (options.parent && options.parent.$store) {
// A child component refers to... In its parent component $store . such , Pass in any component this.$store
// You can access the store
this.$store = options.parent.$store
}
}
}
 Copy code 

Conclusion

For things like parsing source code , I am also a novice . If there is something wrong or not precise , I hope you can point out , So that we can have a good time together Lose hair . meanwhile , It is suggested that beginners , Before reading the source code , It's better to have learned and used Vuex. Only so , In order to more clearly understand its workflow and principle .

版权声明
本文为[Listen to the wind and rain at night]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504184939018r.html

  1. Gallop workflow engine design series 01 process element design
  2. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  3. Vue Mobile Music App learning [16]: player lyrics display development
  4. jquery cookie
  5. jquery cookie
  6. 体面编码之JavaScript
  7. JavaScript for decent coding
  8. React17 系统精讲 结合TS打造旅游电商平台
  9. React17 system combined with TS to build tourism e-commerce platform
  10. 2021-05-04 hot news
  11. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  12. gRPC-Web:替代REST的gRPC的Javascript库包
  13. The relationship between httpsession object and cooike and the construction of cookie object
  14. Grpc Web: a JavaScript library package to replace rest grpc
  15. Building reactive rest API with Java - kalpa Senanayake
  16. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  17. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  18. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  19. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  20. Vue.js比jQuery更容易学习
  21. Node.js的Reactor模式 与异步编程
  22. Vue. JS is easier to learn than jQuery
  23. Reactor mode of node.js and asynchronous programming
  24. 详解JavaScript中的正则表达式
  25. Explain regular expressions in JavaScript
  26. 详解JavaScript中的正则表达式
  27. Explain regular expressions in JavaScript
  28. JS: closure
  29. Write your own promise in promises / A + specification
  30. Analysis of the core mechanism of webpack from loader, plugin to egg
  31. On the import and export of webpack
  32. Interpretation of lodash source code (2)
  33. Hexo series (5) writing articles
  34. 有人用过JMeter或用HttpUnit写过测试吗????
  35. Has anyone ever used JMeter or written tests in httpUnit????
  36. JavaScript异步编程4——Promise错误处理
  37. Leetcode 1846. Reduce and rearrange the largest element of an array
  38. JavaScript asynchronous programming 4 -- promise error handling
  39. SQLite是一种经典的无服务器Serverless
  40. 通过Spring Boot Webflux实现Reactor Kafka
  41. SQLite is a classic server less
  42. Realization of reactor Kafka through spring boot Webflux
  43. Focus on the basic knowledge of JS
  44. Node.js与Spring Boot比较? - Ryan Gleason
  45. Compare node.js with spring boot- Ryan Gleason
  46. 「HTML+CSS」自定义加载动画【049】
  47. 「HTML+CSS」自定义加载动画【048】
  48. 「HTML+CSS」--自定义加载动画【047】
  49. "HTML + CSS" custom loading animation [049]
  50. "HTML + CSS" custom loading animation [048]
  51. "HTML + CSS" -- custom loading animation [047]
  52. 使用Akka实现Reactive DDD
  53. Prototype与JQuery对比
  54. Using akka to realize reactive DDD
  55. Comparison between prototype and jquery
  56. Please elaborate the diff algorithm of Vue
  57. On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.
  58. 使用Slonik框架基于Node.js和PostgreSQL处理大量数据
  59. Using slonik framework to process large amount of data based on node.js and PostgreSQL
  60. Netflix使用React制作高性能电视用户界面