• Vuex. Use (vuex) What does Vuex do in this process?

Call vuex’s install method to check whether vuex has been registered. If vuex has been registered, it will return directly. The singleton mode is used here. Call applyMixin(Vue) to blend the vuex initialization method (vuexInit) into the Vue beforeCreate life cycle; Bind $store to each vue instance.

The source code interpretation

  • Before we look at the install method, we need to know what the vuex.use method does. The source code is located in the Vue source project SRC /global-api/use.js

    Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedplugins.indexof (plugin) > -1) {// Vue checks whether the plugin has been registered, Return this} // Additional parameters const args = toArray(arguments, 1) We need to pass it in as the second parameter to apply, not as the first parameter is our plugin (vuex,vueRouter, elementui, etc.); If (typeof plugin.install === 'function') {plugin.install.apply(plugin, plugin); // If the plugin has an intall method, call its install method directly and pass in args. } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }Copy the code
    • The Vuex install method is located in Vuex SRC /store.js
    Export function install (_Vue) {if (Vue &&_vue === Vue) { If (__DEV__) {console.error('[vuex] already installed.vue. use(vuex) should be called only once.')} Return} Vue = _Vue applyMixin(Vue) // call applyMixin and see what this function does}Copy the code
    • The source code for the applyMixin method is SRC /mixin.js in Vue
    Export default function (Vue) {const version = Number(Vue.version.split('.')[0]) // Obtain the Vue version if (version >= 2) {// Mixin ({beforeCreate: vuexInit) {vuexInit ({beforeCreate: vuexInit); VuexInit})} else {// This code can be ignored, // Override init and inject vuex init procedure // for 1.x backwards compatibility. Const _init = Vue.prototype._init Vue.prototype._init = function (options = {}) { options.init = options.init ? [vuexInit].concat(options.init) : vuexInit _init.call(this, options) } } /** * Vuex init hook, Injected into each instances init hooks list. */ function vuexInit () {// This function will be called when we instantiate vue. Const options = this.$options // get vue $options // store injection if (options.store) { New vue ({store}).$mount('app') this.$store = typeof options.store === 'function'? options.store() : $store} else if (options.parent && options.parent.$store) { We need to be able to call vuex directly from any Vue component using this.$store, so vuex does the job for us. If the option of the current component doesn't have a store attribute, it looks at the parent component until it gets the store attribute and assigns it to the $store attribute. This way we can use this.$store in Vue components. */ this.$store = options.parent.$store } }Copy the code

    Conclusion Vue. Use (vuex)

    - Determine whether vUE has registered the vuex plug-in; - blend the 'vuexInit' function into the vue beforeCreate life cycle; - When vUE is instantiated, the $store attribute is added to each instance of vue and vuex instances are bound to the $store attributeCopy the code