阅读 4131

Vuex 源码解析(如何阅读源代码实践篇)

上一篇文章说的是如何阅读框架源代码,收到了“如果更详细一点就好了”的反馈,不如就以 Vuex 为切入点进行一次实践吧,不矫揉不造作,说走咱就走~~

一、前提

本文假定你已经对 Vue 的使用上有一定的概念,不要求轻车熟路(使用过 Vuex 当然是最好的),但至少要了解基本的事件绑定方式,以及 Mixin 的用法,官方文档从此去

二、Vuex 解决了什么问题

官方的说法:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
这里首先要搞清楚什么是状态,状态就是数据,也就是说: Vuex 提供了一套 Vue 应用统一的数据源管理模式,除了定义数据源,还定义了数据的管理模式

这其中,Store 所包含的两个核心部分 State 和 Actions 分别代表了数据源,和数据的管理(操作)模式,同时作为一个全局的 VM,其有效的协调了 Vue 各组件间的通信

三、Vuex 的设计思想

如果读 Vue 文档的时候足够留心,兴许你能在插件一节找到蛛丝马迹:

插件的功能包括,通过全局 mixin 方法添加一些组件选项,如:vuex

也就是说,Vuex 不过是 Vue 的一个插件,通过 Mixin 的方式给每个组件注入一个 $store 对象,由于每个组件的 $store 指向的是同一个 store 对象(后面通过详读代码可以知道,这个 $store 其实是一个 VM 对象),所以 store 是全局的,这就印证了之前在我们为什么需要 Vuex中的一个结论,Vuex 类似于一个事件总线

四、详读代码

通过 Mixin 注入 Store

从入口文件 index.js 开始,代码不多,可以直接贴出来

export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}复制代码

如果你一眼就看出这里的关键是 install,那么你应该领略到读源码先了解设计思想的独特魅力了,没错,作为 Vue 的 Plugin,install 方法就是入口

循着 install 方法进入 store.js,还是符合预期,这个方法主要干得是事情就是 mixin

export function install (_Vue) {
  ...
  Vue = _Vue
  applyMixin(Vue)
}

// auto install in dist mode
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}复制代码

并且还有一个小细节,浏览器环境下并且 Vue 不为空的时候,引入 Vuex 之后是会自动注册的

具体来看看 mixin.js 这个文件,划重点(注意看注释):

// 通过钩子 init / beforeCreate 执行 vuexInit
const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })

// 组件初始化的时候注入 $store
function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
}复制代码

Store 对象

Vuex 的最佳实践中,一般这样使用(带着目标去阅读,效果更佳):

// create store
const store = new Vuex.Store({
  actions: {
    ...
  },
  modules: {
    ...
  }
})
import App from './comps/app.vue'
new Vue(Vue.util.extend({ el: '#root', store }, App))复制代码

我们需要新建一个 Store,在创建 Vue 实例的时候,作为参数传入,在上一节的 vuexInit 函数中,是从 this.$options 中取出 store 赋值给组件的 $store 的,如此,便能无缝联系上了

接下来的重点,就是 Store 这个类了,还是 store.js 这个文件,怀着入参为 ations 和 modules 的预期,来读 constructor 方法,倒是有一个语句是用来处理 modules 的

this._modules = new ModuleCollection(options)复制代码

但真的是寻寻觅觅寻不到从 options 中取出 actions 进行处理的方法,当然后面仔细阅读了 ModuleCollection 中的代码之后,才找到了答案,actions 参数也是在这里面提取的。毕竟让我纠结迷茫了良久,如果是我来写的话,我可能不会这么写,方法的命名需要有语义性,而且一个方法也应当只做一件事情

原则上为了尽快理清主流程,有些细节需要暂时略过(所以语义化的命名、合理的函数拆分,对阅读者来说是多么的重要),假设已经知道前面的步骤已经从 options 中读到了 actions 和 modules,那么下一个核心节点就是:

installModule(this, state, [], this._modules.root)复制代码

这一步再进行分解(注意看注释)

  // 注册 mutation
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  // 注册 action
  module.forEachAction((action, key) => {
    const namespacedType = namespace + key
    registerAction(store, namespacedType, action, local)
  })

  // 注册 getter (computed)
  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

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

出于篇幅以及希望阅读的同学亲自实践的目的,具体的注册方式这里不再展开

进入下一个重要环节 resetStoreVM,创建 VM,实现数据监听(注意看注释)

function resetStoreVM (store, state, hot) {

  // bind store public getters
  // getters 其实就是 computed
  store.getters = {}
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  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
    })
  })

  // 创建一个 Vue 实例,作为 Store 的 VM
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
  ...
}复制代码

五、小结

至此,Vuex 的主流程代码基本上算是走了一遍,看似神奇,可是代码量并不大,还是那句话,希望阅读的同学能够按照这个套路自己走一遍

本文在公众号菲麦前端同步发行:

关注下面的标签,发现更多相似文章
评论