vuex2.0源码分析

当我们用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等，这些方法都是对上面代码行为的封装调用，然后暴露出来的接口，都比较容易理解。

巴特西

vuex2.0源码分析

最新文章

热门文章