Vuex源码分析(转)

当我们用vue在开发的过程中，经常会遇到以下问题

多个vue组件共享状态

Vue组件间的通讯

在项目不复杂的时候，我们会利用全局事件bus的方式解决,但随着复杂度的提升，用这种方式将会使得代码难以维护，因此vue官网推荐了一种更好用的解决方案Vuex。

Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说直白一点，vuex就是把组件的共享状态抽取出来，以一个全局单例模式管理的数据仓库，里面提供了对应用的数据存储和对数据的操作，维护整个应用的公共数据。

看源代码之前，我们看一下vuex的使用方法

/***code例子*****/
/**
 *  store.js文件
 *  创建store对象，配置state、action、mutation以及getter
 *
 **/
import Vue from 'vue'
import Vuex from 'vuex'
//注册插件
Vue.use(Vuex)
 
//创建store仓库
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
 
/**
 *  vue-index.js文件
 *
 *
 **/
 
import Vue from 'vue'
import App from './../pages/app.vue'
import store from './store.js'
//将store挂载到根组件
new Vue({
  el: '#root',
  router,
  store,
  render: h => h(App)
})
 
//app.vue
export default {
  computed: {
 
  },
  methods: {
    increment (obj) {
    //组件中调用increment方法
      this.$store.dispatch('increment', obj)
    }
  }
}

整个vuex的使用步骤如下：

1、安装vuex插件

2、创建store状态管理仓库

3、将store注入到vue组件

4、使用dispatch调用action方法

框架核心流程

在分析源代码之前，我们先来看一下整个vuex的运行流程，下面这张图是官方文档中提供的核心思想图

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

dispatch：操作行为触发方法，是唯一能执行action的方法。

actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。

commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法

state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

整体流程：

用户在组件上的交互触发的action，action通过调用（commit）mutations的方法去改变state的状态，而state由于加入了vue的数据响应机制，会导致对应的vue组件更新视图，完成整个状态更新。

目录结构

源代码分析前，首先我们看一下目录结构

module

module-collection.js：创建模块树

Module.js：创建模块

plugins

devtool.js：开发环境工具插件，针对chorme安装 vue-tool 插件

logger.js：state状态改变日志查询

helpers.js：提供mapSate,mapMutations,mapActions,mapGetters 等操作api函数

index.js

index.exm.js：都是入口文件

mixin.js：混入方法，提供将store 仓库挂载到每个vue实例的方法

store.js：整个代码核心，创建store对象

util.js：工具类

Vuex的安装

Vue 通过Vue.use(Vuex)安装vuex, use通过调用vuex对象的install方法将vuex载入，我们看一下install方法的实现：

let Vue // 安装的时候增加vue对象，避免引入vue包
//安装插件
export function install(_Vue) {
    //Vue已经被初始化，说明已经安装过，给出提示
    if (Vue) {
        if (process.env.NODE_ENV !== 'production') {
            console.error(
                '[vuex] already installed. Vue.use(Vuex) should be called only once.'
            )
        }
        return
    }
    Vue = _Vue
        //安装vuex
    applyMixin(Vue)
}
 
// 自动安装模块
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

这里用了一个比较巧的方法，vue作为参数传入vuex，所以我们不用通过导入vue，代码打包的时候就不会将vue包含进来。

来看下applyMixin方法内部代码

const version = Number(Vue.version.split('.')[0])
    //2.0以上用混入
if (version >= 2) {
    Vue.mixin({ beforeCreate: vuexInit })
} else {
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    //重写init方法
    const _init = Vue.prototype._init
    Vue.prototype._init = function(options = {}) {
        options.init = options.init ? [vuexInit].concat(options.init) :
            vuexInit
        _init.call(this, options)
    }
}
 
  function vuexInit() {
    const options = this.$options
        // store 注入
    if (options.store) { //根组件
        this.$store = typeof options.store === 'function' ?
            options.store() : //模块重用
            options.store
    } else if (options.parent && options.parent.$store) { //其他非根组件注入,向上传递$store，保证任何组件都可以访问到
        this.$store = options.parent.$store
    }
}

根据不同版本，2.x.x以上版本，使用 hook 的形式进行注入，或使用封装并替换Vue对象原型的_init方法，实现注入。

将初始化Vue根组件时传入的store设置到this对象的$store属性上，子组件从其父组件引用$store属性，层层嵌套进行设置。在任意组件中执行 this.$store 都能找到装载的那个store对象

接下来我们来看状态管理库的创建

我们从构造函数一步一步分析

ModuleCollection构建

if (process.env.NODE_ENV !== 'production') {
        assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`) //没有vue对象说明没有注入
        assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
        assert(this instanceof Store, `Store must be called with the new operator.`)
    }
 
    const {
        plugins = [], //这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数
            strict = false //严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误
    } = options
 
    let {
        state = {} //状态
    } = options
    if (typeof state === 'function') {
        state = state() //状态复用，使用一个函数来声明模块状态
    }
 
    // store internal state
    this._committing = false //是否在提交状态
    this._actions = Object.create(null) //action对象存储
    this._mutations = Object.create(null) //mutation对象存储
    this._wrappedGetters = Object.create(null) //装后的getters集合对象
    this._modules = new ModuleCollection(options) //封装module集合对象
    this._modulesNamespaceMap = Object.create(null) //创建命名空间
    this._subscribers = []
    this._watcherVM = new Vue() //vue实例，Vue组件用于watch监视变化，相当于bus

首先对执行环境做判断，vuex必须已经安装并且支持Promise语法，接下来对输入的参数进行简单的处理以及创建一些属性，用于后续操作，其中有一步操作this._modules = new ModuleCollection(options)，对传入的options进行处理，生成模块集合。来看一下ModuleCollection的操作

constructor(rawRootModule) {
    // register root module (Vuex.Store options)
    //注册根模块
    this.register([], rawRootModule, false)
}
register(path, rawModule, runtime = true) {
    if (process.env.NODE_ENV !== 'production') {
        assertRawModule(path, rawModule)
    }
    //生成模块对象
    const newModule = new Module(rawModule, runtime)
    if (path.length === 0) {
        this.root = newModule //根模块
    } else {
        //子元素把关系添加到父元素，形式关系树
        const parent = this.get(path.slice(0, -1))
        parent.addChild(path[path.length - 1], newModule)
    }
 
    // 注册嵌套的模块
    if (rawModule.modules) {
        forEachValue(rawModule.modules, (rawChildModule, key) => {
            this.register(path.concat(key), rawChildModule, runtime)
                //this.register(['cart',{cartmodules},runtime])
        })
    }
}

ModuleCollection主要将传入的options对象整个构造为一个module对象，并循环调用 this.register([key], rawModule, false) 为其中的modules属性进行模块注册，使其都成为module对象，最后options对象被构造成一个完整的状态树。ModuleCollection类还提供了modules的更替功能

modules属性中每一个模块都是一个模块对象，而传入的option会被当成是整个状态树的根模块。

我们接下来看一下了解一下module对象

    constructor(rawModule, runtime) {
        this.runtime = runtime //运行时间
        this._children = Object.create(null) //children子模块
        this._rawModule = rawModule //模块内容
        const rawState = rawModule.state //模块状态
        this.state = (typeof rawState === 'function' ? rawState() : rawState) || {} //state
    }

对象是对传入的每一个module参数进行封装，添加了存储的子模块，已达到状态树的构建目的，同时提供一些基本操作的方法。

我们来看一下官网提供的购物车的例子构建完的moduleCollection对象

这个利用树形结构，清晰地表达出了整个数据仓库数据的关系，moduleCollection将成为后期数据和操作重新组织和查找基础。

dispatch和commit函数设置

回到store的构造函数

const store = this
const { dispatch, commit } = this
//dispatch 方法
this.dispatch = function boundDispatch(type, payload) {
        return dispatch.call(store, type, payload)
    }
    //commit 方法
this.commit = function boundCommit(type, payload, options) {
    return commit.call(store, type, payload, options)
}

封装dispatch 和commit方法，具体实现如下：

commit(_type, _payload, _options) {
        // check object-style commit
        const {
            type,
            payload,
            options
        } = unifyObjectStyle(_type, _payload, _options)
 
        const mutation = { type, payload }
        const entry = this._mutations[type] //变化有没有注册这个类型  commit导致mutation
        if (!entry) {
            if (process.env.NODE_ENV !== 'production') {
                console.error(`[vuex] unknown mutation type: ${type}`)
            }
            return
        }
        //处理commit
        this._withCommit(() => {
            entry.forEach(function commitIterator(handler) {
                handler(payload) //mutation操作
            })
        })
 
        // 订阅者函数遍历执行，传入当前的mutation对象和当前的state
        this._subscribers.forEach(sub => sub(mutation, this.state))
 
        //新版本silent去掉了
        if (
            process.env.NODE_ENV !== 'production' &&
            options && options.silent
        ) {
            console.warn(
                `[vuex] mutation type: ${type}. Silent option has been removed. ` +
                'Use the filter functionality in the vue-devtools'
            )
        }
    }
    //触发action
dispatch(_type, _payload) {
    // check object-style dispatch
    const {
        type,
        payload
    } = unifyObjectStyle(_type, _payload)
 
    const entry = this._actions[type] //触发action配置表
    if (!entry) {
        if (process.env.NODE_ENV !== 'production') {
            console.error(`[vuex] unknown action type: ${type}`)
        }
        return
    }
    return entry.length > 1 ?
        Promise.all(entry.map(handler => handler(payload))) :
        entry[0](payload)
}

dispatch的功能是触发并传递一些参数（payload）给对应type的action。Dispatch提供了两种方法的调用：

所以使用了unifyObjectStyle对传入的参数做了统一化处理。接着找到对应type的action,并逐个执行。

commit方法和dispatch方法大同小异，但是比dispatch复杂一点。每次调用都要对订阅者遍历执行，这个操作的原因后面再解析。同时每次执行mutation方法集合时，都要调用函数_withCommit方法。

_withCommit是一个代理方法，所有触发mutation的进行state修改的操作都经过它，由此来统一管理监控state状态的修改。实现代码如下。

    _withCommit(fn) {
        const committing = this._committing
        this._committing = true
        fn()
        this._committing = committing
    }

每次提交前保存当前commit状态，然后置为true后进行本次操作，操作完成后再还原本次修改之前的状态。我们上面说过mutation是Vuex修改state的唯一推荐方法。这样设置的作用有利于状态的跟踪，state的修改来自于mutation。那是如何跟踪的呢？我们看下面一段代码：

function enableStrictMode(store) {
    store._vm.$watch(function() { return this._data.$$state }, () => {
        if (process.env.NODE_ENV !== 'production') {
            //如果不是通过commit函数，提示
            assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
        }
    }, { deep: true, sync: true })
}

这里通过vue $watch 方法监控每一次data的变化，如果在开发环境并且committing为false的话，则表明不是通过mutation操作状态变化，提示非法。同时这也解释了官网要求mutation必须为同步操作state。因为如果异步的话，异步函数调用完成后committing已经还原状态，而回调函数还没调用，$watch还没有接收到data的变化，当回调成功时，committing已经被置为false，不利于状态的跟踪。

模块的安装

接下来，构造函数进行模块的安装

// init root module. 初始化根模块
// this also recursively registers all sub-modules 递归所有子模块
// and collects all module getters inside this._wrappedGetters 把所有的getters对象都收集到Getter里面
installModule(this, state, [], this._modules.root)

我们看一下installModule的具体内容

function installModule(store, rootState, path, module, hot) {
    const isRoot = !path.length //是否为根元素
    const namespace = store._modules.getNamespace(path) //命名空间
 
    // register in namespace map 如果是命名空间模块，推送到map对象里面
    if (module.namespaced) {
        store._modulesNamespaceMap[namespace] = module
    }
 
    // set state
    //将模块的state添加到state链中，是的可以按照 state.moduleName 访问
    if (!isRoot && !hot) {
        const parentState = getNestedState(rootState, path.slice(0, -1))
        const moduleName = path[path.length - 1]
        store._withCommit(() => {
            //确保属性被创建后也是响应式的
            Vue.set(parentState, moduleName, module.state)
        })
    }
    //模块上下文
    /*local {
        dispatch,
        commit,
        getters,
        state
    }
    */
    const local = module.context = makeLocalContext(store, namespace, path)
        // 注册对应模块的mutation，供state修改使用
    module.forEachMutation((mutation, key) => {
            const namespacedType = namespace + key
            registerMutation(store, namespacedType, mutation, local)
        })
        // 注册对应模块的action，供数据操作、提交mutation等异步操作使用
    module.forEachAction((action, key) => {
            const namespacedType = namespace + key
            registerAction(store, namespacedType, action, local)
        })
        // 注册对应模块的getters，供state读取使用
    module.forEachGetter((getter, key) => {
        const namespacedType = namespace + key
        registerGetter(store, namespacedType, getter, local)
    })
 
}

判断是否是根目录，以及是否设置了命名空间，若存在则在namespace中进行module的存储，在不是根组件且不是 hot 条件的情况下，通过getNestedState方法拿到该module父级的state，拿到其所在moduleName，调用 Vue.set(parentState, moduleName, module.state) 方法将其state设置到父级state对象的moduleName属性中，由此实现该模块的state注册。这里建立了一条可观测的data数据链。

接下来定义local变量和module.context的值，执行makeLocalContext方法，为该module设置局部的 dispatch、commit方法以及getters和state，为的是在局部的模块内调用模块定义的action和mutation。也就是官网提供的这种调用方式

定义local环境后，循环注册我们在options中配置的action以及mutation等，这种注册操作都是大同小异，我们来看一下注册mutation的步骤：

/***registerMutation***/
function registerMutation(store, type, handler, local) {
    const entry = store._mutations[type] || (store._mutations[type] = [])
        //重新封装调用函数
    entry.push(function wrappedMutationHandler(payload) {
        handler.call(store, local.state, payload)
    })
}

type作为id，把对应的值函数封装后存储在数组里面，然后作为store._mutations的属性。store._mutations收集了我们传入的所有mutation函数

action和getter的注册也是同理的，只是action handler比mutation handler以及getter wrapper多拿到dispatch和commit操作方法，因此action可以进行dispatch action和commit mutation操作。

注册完了根组件的actions、mutations以及getters后，递归调用自身，为子组件注册其state，actions、mutations以及getters等。

/***子模块代码****/
  module.forEachChild((child, key) => {
        installModule(store, rootState, path.concat(key), child, hot)
    })
/***子模块代码end****/

Store._vm组件安装

执行完各module的install后，执行resetStoreVM方法，进行store组件的初始化。

resetStoreVM(this, state)
 function resetStoreVM(store, state, hot) {
    const oldVm = store._vm
 
    // bind store public getters
    store.getters = {}
    const wrappedGetters = store._wrappedGetters
    const computed = {}
        // 循环所有处理过的getters，并新建computed对象进行存储，通过Object.defineProperty方法为getters对象建立属性，
        //使得我们通过this.$store.getters.xxxgetter能够访问到该getters
    forEachValue(wrappedGetters, (fn, key) => {
        // use computed to leverage its lazy-caching mechanism
        computed[key] = () => fn(store)
        Object.defineProperty(store.getters, key, {
            get: () => store._vm[key],
            enumerable: true // for local getters
        })
    })
 
    // use a Vue instance to store the state tree
    // suppress warnings just in case the user has added
    // some funky global mixins
    const silent = Vue.config.silent
    Vue.config.silent = true
        // 设置新的storeVm，将当前初始化的state以及getters作为computed属性（刚刚遍历生成的）
    store._vm = new Vue({
        data: {
            $$state: state //相当于总线
        },
        computed
    })
    Vue.config.silent = silent
 
    // enable strict mode for new vm
    // 该方法对state执行$watch以禁止从mutation外部修改state
    if (store.strict) {
        enableStrictMode(store)
    }
    // 若不是初始化过程执行的该方法，将旧的组件state设置为null，
    //强制更新所有监听者(watchers)，待更新生效，DOM更新完成后，执行vm组件的destroy方法进行销毁，减少内存的占用
    if (oldVm) {
        if (hot) {
            // dispatch changes in all subscribed watchers
            // to force getter re-evaluation for hot reloading.
            store._withCommit(() => {
                oldVm._data.$$state = null
            })
        }
        Vue.nextTick(() => oldVm.$destroy())
    }
}

resetStoreVm方法创建了当前store实例的_vm组件，至此store就创建完毕了

plugin注入

最后执行plugin插件

//打印变化前后的值
plugins.forEach(plugin => plugin(this))
 
//如果配置了开发者工具
if (Vue.config.devtools) {
    devtoolPlugin(this)
}

Plugins.foreach 默认执行了createlogger方法，我们来看createLogger的实现代码：

export default function createLogger({
    collapsed = true,
    filter = (mutation, stateBefore, stateAfter) => true,
    transformer = state => state,
    mutationTransformer = mut => mut
} = {}) {
    return store => {
        let prevState = deepCopy(store.state)
 
        store.subscribe((mutation, state) => {
            if (typeof console === 'undefined') {
                return
            }
            const nextState = deepCopy(state)
 
            if (filter(mutation, prevState, nextState)) {
                const time = new Date()
                const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
                const formattedMutation = mutationTransformer(mutation)
                const message = `mutation ${mutation.type}${formattedTime}`
                const startMessage = collapsed ?
                    console.groupCollapsed :
                    console.group
 
                // render
                try {
                    startMessage.call(console, message)
                } catch (e) {
                    console.log(message)
                }
 
                console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
                console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
                console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
 
                try {
                    console.groupEnd()
                } catch (e) {
                    console.log('—— log end ——')
                }
            }
 
            prevState = nextState
        })
    }
}

createLogger通过store.subscribe将方法添加到订阅，待触发的时候调用。这里通过前后state状态的打印对比，跟踪状态变更。

devtoolPlugin则是对vue-tool控制台信息的添加监控

mapSate,mapMutations,mapActions,mapGetters函数实现

Vuex还提供了mapSate,mapMutations,mapActions,mapGetters辅助函数来帮助我们生成计算属性和对应方法。下面用mapMutations为例来分析一下实现过程

首先看调用的方式：

import { mapMutations } from 'vuex'
 
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
 
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
    ...mapMutations('some/nested/module', [  //在模块some/nested/module查看
    'foo', //将 `this.increment()` 映射为 `this.$store.commit('some/nested/module/foo')`
    'bar'
  ])
  }
}

看一下源代码：

export const mapMutations = normalizeNamespace((namespace, mutations) => {
const res = {}
normalizeMap(mutations).forEach(({ key, val }) => {
    val = namespace + val
    res[key] = function mappedMutation(...args) {
        if (namespace && !getModuleByNamespace(this.$store, 'mapMutations', namespace)) {
            return
        }
        return this.$store.commit.apply(this.$store, [val].concat(args))
    }
})
return res
})
 
  //返回对象数组 key-value
function normalizeMap(map) {
    return Array.isArray(map) ?
        map.map(key => ({ key, val: key })) :
        Object.keys(map).map(key => ({ key, val: map[key] }))
}
 
//处理命名空间参数问题
function normalizeNamespace(fn) {
    return (namespace, map) => {
        if (typeof namespace !== 'string') {
            map = namespace
            namespace = ''
        } else if (namespace.charAt(namespace.length - 1) !== '/') {
            namespace += '/'
        }
        return fn(namespace, map)
    }
}
 
//通过命名空间找模块
function getModuleByNamespace(store, helper, namespace) {
    const module = store._modulesNamespaceMap[namespace]
    if (process.env.NODE_ENV !== 'production' && !module) {
        console.error(`[vuex] module namespace not found in ${helper}(): ${namespace}`)
    }
    return module
}

其实就是用normalizeNamespace和normalizeMap去统一化参数，生成key-value的对象组，然后对函数惊醒封装，调用commit方法。

至此，整个vuex的源码核心就分析完成。源码中还有一些工具函数类似registerModule、unregisterModule、hotUpdate、watch以及subscribe等，这些方法都是对上面代码行为的封装调用，然后暴露出来的接口，都比较容易理解。

链接：https://www.cnblogs.com/caizhenbo/p/7380200.html