vuex源码简析

前言


基于 vuex 3.12 按如下流程进行分析：

Vue.use(Vuex);

const store = new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  modules
  // ...
});

new Vue({store});

Vue.use(Vuex)


Vue.use() 会执行插件的 install 方法，并把插件放入缓存数组中。

而 Vuex 的 install 方法很简单，保证只执行一次，以及使用 applyMixin 初始化。

export function install (_Vue) {
  // 保证只执行一次
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue

  // 初始化
  applyMixin(Vue)
}

applyMixin 方法定义在 vuex/src/mixin.js，vuex 还兼容了 vue 1 的版本，这里只关注 vue 2 的处理。

export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    // 混入一个 beforeCreate 方法
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    // 这里是 vue 1 的兼容处理
  }

  // 这里的逻辑就是将 options.store 保存在 vue 组件的 this.$store 中，
  // options.store 就是 new Vue({...}) 时传入的 store,
  // 也就是 new Vuex.Store({...}) 生成的实例。
  function vuexInit () {
    const options = this.$options
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

new Vuex.Store({...})


先看 Store 的构造函数：

constructor (options = {}) {
  const { plugins = [], strict = false } = options

  this._committing = false
  this._actions = Object.create(null)
  this._actionSubscribers = []
  this._mutations = Object.create(null)
  this._wrappedGetters = Object.create(null)
  // 构建 modules
  this._modules = new ModuleCollection(options)
  this._modulesNamespaceMap = Object.create(null)
  this._subscribers = []
  // store.watch
  this._watcherVM = new Vue()
  this._makeLocalGettersCache = Object.create(null)

  // bind commit and dispatch to self
  const store = this
  const { dispatch, commit } = this
  this.dispatch = function boundDispatch (type, payload) {
    return dispatch.call(store, type, payload)
  }
  this.commit = function boundCommit (type, payload, options) {
    return commit.call(store, type, payload, options)
  }

  // strict mode
  this.strict = strict
    // 安装模块
  const state = this._modules.root.state
  installModule(this, state, [], this._modules.root)

  // 实现状态的响应式
  resetStoreVM(this, state)

  // apply plugins
  plugins.forEach(plugin => plugin(this))

  const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
  if (useDevtools) {
    devtoolPlugin(this)
  }
}

this._modules

vuex 为了让结构清晰，允许我们将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter，而且模块自身也可以拥有子模块。

const moduleA = {...}
const moduleB = {...}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

而模块在 vuex 的构造函数中通过new ModuleCollection(options)生成，依然只看构造函数：

// vuex/src/module/module-collection.js
export default class ModuleCollection {
  constructor (rawRootModule) {
    // register root module (Vuex.Store options)
    this.register([], rawRootModule, false)
  }

  register (path, rawModule, runtime = true) {
    // 生成一个 module
    const newModule = new Module(rawModule, runtime)
    // new Vuex.Store() 生成的是根模块
    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)
      })
    }
  }
}

register 接收 3 个参数，其中 path 表示路径，即模块树的路径，rawModule 表示传入的模块的配置，runtime 表示是否是一个运行时创建的模块。

register首先 new Module() 生成一个模块。

// vuex/src/module/module.js
export default class Module {
  constructor (rawModule, runtime) {
    this.runtime = runtime
    // 子模块
    this._children = Object.create(null)
    // module 原始配置
    this._rawModule = rawModule
    const rawState = rawModule.state
    // state
    this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
  }
}

实例化一个 module 后，判断当前的 path 的长度，如果为 0，就是是一个根模块，所以把 newModule 赋值给 this.root，而 new Vuex.Store() 生成的就是根模块。

如果不为 0，就建立父子模块的关系：

const parent = this.get(path.slice(0, -1))
parent.addChild(path[path.length - 1], newModule)

首先根据路径获取父模块，然后再调用父模块的 addChild 方法将子模块加入到 this._children 中，以此建立父子关系。

register 最后会检测是否有嵌套的模块，然后进行注册嵌套的模块：

if (rawModule.modules) {
  forEachValue(rawModule.modules, (rawChildModule, key) => {
    this.register(path.concat(key), rawChildModule, runtime)
  })
}

遍历当前模块定义中的所有 modules，根据 key 作为 path，递归调用 register 方法进行注册。

installModule

注册完模块就会开始安装模块：

const state = this._modules.root.state
installModule(this, state, [], this._modules.root)

installModule 方法支持 5 个参数: store，state，path(模块路径)，module(根模块)，hot(是否热更新)。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。但是如果有同名的 mutation 被提交，会触发所有同名的 mutation。

因此 vuex 提供了 namespaced: true 让模块成为带命名空间的模块，当模块被注册后，它的所有 action、mutation 和 getter 都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      // 进一步嵌套命名空间
      posts: {
        namespaced: true,
        getters: {
          popular () { ... } // -> getters['account/posts/popular']
        }
      }
    }
  }
})

回到 installModule 方法本身：

function installModule (store, rootState, path, module, hot) {
  // 是否为根模块
  const isRoot = !path.length
  // 获取命名空间,
  // 比如说 { a: moduleA } => 'a/',
  // root 没有 namespace
  const namespace = store._modules.getNamespace(path)

  // 将有 namespace 的 module 缓存起来
  if (module.namespaced) {
    store._modulesNamespaceMap[namespace] = module
  }

  if (!isRoot && !hot) {
    // 给 store.state 添加属性，
    // 假如有 modules: { a: moduleA }，
    // 则 state: { a: moduleA.state }
    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 函数，
  // 举个例子，modules: { a: moduleA },
  // moduleA 中有名为 increment 的 mutation，
  // 通过 makeLocalContext 函数，会将 increment 变成
  // a/increment，这样就可以在 moduleA 中找到定义的函数
  const local = module.context = makeLocalContext(store, namespace, path)

  // 下面这几个遍历循环函数，
  // 都是在注册模块中的 mutation、action 等等，
  // moduleA 中有名为 increment 的 mutation，
  // 那么会将 namespace + key 拼接起来，
  // 变为 'a/increment'
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    // 会用 this._mutations 将每个 mutation 存储起来，
    // 因为允许同一 namespacedType 对应多个方法，
    // 所以同一 namespacedType 是用数组存储的，
    // store._mutations[type] = []
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action
    // 和上面一样，用 this._actions 将 action 存储起来
    registerAction(store, type, handler, local)
  })

  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    // 会用 this._wrappedGetters 存储起来
    // getters 有一点不一样，
    // 这里保存的是一个返回 getters 的函数，
    // 而且同一 namespacedType 只能定义一个。
    registerGetter(store, namespacedType, getter, local)
  })

  // 递归安装子模块
  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })
}

makeLocalContext

function makeLocalContext (store, namespace, path) {
  // 判断是否有 namespace
  const noNamespace = namespace === ''

  const local = {
    // 重写 dispatch
    dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
      const args = unifyObjectStyle(_type, _payload, _options)
      const { payload, options } = args
      let { type } = args

      if (!options || !options.root) {
        type = namespace + type
      }

      return store.dispatch(type, payload)
    },

    // 重写 commit 方法
    commit: noNamespace ? store.commit : (_type, _payload, _options) => {
      const args = unifyObjectStyle(_type, _payload, _options)
      const { payload, options } = args
      let { type } = args

      if (!options || !options.root) {
        type = namespace + type
      }

      store.commit(type, payload, options)
    }
  }

  Object.defineProperties(local, {
    getters: {
      get: noNamespace
        ? () => store.getters
        // local.getters 本质上是通过匹配 namespace，
        // 从 store.getters[type] 中获取
        : () => makeLocalGetters(store, namespace)
    },
    state: {
      // local.state 本质上是通过解析 path，
      // 从 store.state 中获取
      get: () => getNestedState(store.state, path)
    }
  })

  return local
}

resetStoreVM(this, state)

初始化 store._vm，利用 Vue 将 store.state 进行响应式处理，并且将 getters 当作 Vue 的计算属性来进行处理：

function resetStoreVM (store, state, hot) {
  const oldVm = store._vm

  store.getters = {}
  // reset local getters cache
  store._makeLocalGettersCache = Object.create(null)
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  // 遍历 store._wrappedGetters 属性
  forEachValue(wrappedGetters, (fn, key) => {
    // 这里的 partial 其实就是创建一个闭包环境，
    // 保存 fn, store 两个变量，并赋值给 computed
    computed[key] = partial(fn, store)
    // 重写 get 方法，
    // store.getters.key 其实是访问了 store._vm[key],
    // 也就是去访问 computed 中的属性
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
  })

  // 实例化一个 Vue 实例 store._vm，
  // 用它来保存 state，computed(getters)，
  // 也就是利用 Vue 的进行响应式处理
  const silent = Vue.config.silent
  Vue.config.silent = true
  // 访问 store.state 时，
  // 其实是访问了 store._vm._data.$$state
  store._vm = new Vue({
    data: {
      $$state: state
    },
    // 这里其实就是上面的 getters
    computed
  })
  Vue.config.silent = silent

  // 开启 strict mode，
  // 只能通过 commit 的方式改变 state
  if (store.strict) {
    enableStrictMode(store)
  }

  if (oldVm) {
    if (hot) {
      // 热重载
      store._withCommit(() => {
        oldVm._data.$$state = null
      })
    }
    // 这里其实是动态注册模块，
    // 将新的模块内容加入后生成了新的 store._vm,
    // 然后将旧的销毁掉
    Vue.nextTick(() => oldVm.$destroy())
  }
}

partial

export function partial (fn, arg) {
  return function () {
    return fn(arg)
  }
}

常用 api

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]
  if (!entry) {
    // 没有 mutation 会报错并退出
    return
  }
  this._withCommit(() => {
    // 允许同一 type 下，有多个方法，
    // 所以循环数组执行 mutation,
    // 实际上执行的就是安装模块时注册的 mutation
    // handler.call(store, local.state, payload)
    entry.forEach(function commitIterator (handler) {
      handler(payload)
    })
  })

  // 触发订阅了 mutation 的所有函数
  this._subscribers
    .slice()
    .forEach(sub => sub(mutation, this.state))
}

dispatch

dispatch (_type, _payload) {
    // check object-style dispatch
    const {
      type,
      payload
    } = unifyObjectStyle(_type, _payload)

    const action = { type, payload }
    // 从 Store._actions 获取
    const entry = this._actions[type]
    if (!entry) {
            // 找不到会报错
      return
    }

    // 在 action 执行之前，
    // 触发监听了 action 的函数
    try {
      this._actionSubscribers
        .slice()
        .filter(sub => sub.before)
        .forEach(sub => sub.before(action, this.state))
    } catch (e) {
        console.error(e)
    }

    // action 用 Promise.all 异步执行,
    // 实际上执行的就是安装模块时注册的 action
    /*
    handler.call(store, {dispatch, commit, getters, state, rootGetters, rootState}, payload, cb)
    */
    const result = entry.length > 1
      ? Promise.all(entry.map(handler => handler(payload)))
      : entry[0](payload)

    return result.then(res => {
      // 在 action 执行之后，
        // 触发监听了 action 的函数
      try {
        this._actionSubscribers
          .filter(sub => sub.after)
          .forEach(sub => sub.after(action, this.state))
      } catch (e) {
          console.error(e)
      }
      return res
    })
  }

watch

watch (getter, cb, options) {
  // new Vuex.Store() 时创建 _watcherVM,
  // this._watcherVM = new Vue(),
  // 本质就是调用 vue 的 api
  return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
}

registerModule

registerModule (path, rawModule, options = {}) {
  if (typeof path === 'string') path = [path]

  // 注册模块
  this._modules.register(path, rawModule)
  // 安装模块
  installModule(this, this.state, path, this._modules.get(path), options.preserveState)
  // 重新生成 vue 实例挂载到 store 上，
  // 然后销毁旧的
  resetStoreVM(this, this.state)
}

## 备注

希望疫情尽快过去吧。——2020/02/08 元宵

原文地址：https://www.cnblogs.com/guolao/p/12284393.html

时间： 2024-10-24 03:24:30

vuex源码简析的相关文章

SpringMVC学习——概念、流程图、源码简析（一）

学习资料:开涛的<跟我学SpringMVC.pdf> 众所周知,springMVC是比较常用的web框架,通常整合spring使用.这里抛开spring,单纯的对springMVC做一下总结. 概念 HandlerMapping:处理器映射,对请求的URL进行映射为具体的处理器(如果有拦截器也包含拦截器,会将Handler和多个HandlerInterceptor封装为HandlerExecutionChain对象) HandlerAdapter:处理器适配器,适配不同类型的处理器,如Cont

并发工具-CyclicBarrier源码简析

CyclicBarrier是循环栅栏的意思,循环的等待多个线程执行任务: <1> 示例代码如下: public class CyclicBarrierTest { public static CyclicBarrier cb = new CyclicBarrier(3, () -> System.out.println("-------开始点名-------")); public static void main(String[] args) { System.out

0002 - Spring MVC 拦截器源码简析：拦截器加载与执行

1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日志.判断用户是否登录等. 2.简单示例 2.1.继承 HandlerInterceptorAdapter 抽象类实现一个拦截器.代码如下: public class DemoInterceptor extends HandlerInterceptorAdapter { @Override    pu

JDK源码简析--java.lang包中的基础类库

题记 JDK,Java Development Kit. 我们必须先认识到,JDK只是,仅仅是一套Java基础类库而已,是Sun公司开发的基础类库,仅此而已,JDK本身和我们自行书写总结的类库,从技术含量来说,还是在一个层级上,它们都是需要被编译成字节码,在JRE中运行的,JDK编译后的结果就是jre/lib下得rt.jar,我们学习使用它的目的是加深对Java的理解,提高我们的Java编码水平. 本系列所有文章基于的JDK版本都是1.7.16. 本节内容 在本节中,简析java.lang包所包

JDK源码简析--java.util包中的工具类库

题记 JDK,Java Development Kit. 我们必须先认识到,JDK只是,仅仅是一套Java基础类库而已,是Sun公司开发的基础类库,仅此而已,JDK本身和我们自行书写总结的类库,从技术含量来说,还是在一个层级上,它们都是需要被编译成字节码,在JRE中运行的,JDK编译后的结果就是jre/lib下得rt.jar,我们学习使用它的目的是加深对Java的理解,提高我们的Java编码水平. 本系列所有文章基于的JDK版本都是1.7.16. 本节内容 在本节中,简析java.util包所包

Linux Hugetlbfs内核源码简析-----(一)Hugetlbfs初始化

一.引言 为了实现虚拟内存管理机制,操作系统对内存实行分页管理.自内存“分页机制”提出之始,内存页面的默认大小便被设置为 4096 字节(4KB),虽然原则上内存页面大小是可配置的,但绝大多数的操作系统实现中仍然采用默认的 4KB 页面.当某些应用的需要使用的内存达到几G.甚至几十G的时候,4KB的内存页面将严重制约程序的性能. CPU缓存中有一组缓存专门用于缓存TLB,但其大小是有限的.当采用的默认页面大小为 4KB,其产生的TLB较大,因而将会产生较多 TLB Miss 和缺页中断,从而大大

[tomcat]源码简析 异步/非阻塞和请求构成

提出疑惑 SpringFramework5.0又新增加了一个功能Webflux(响应式编程),是一个典型非阻塞异步的框架.我们知道servlet3.0实现异步(AsyncContext),servlet3.1又提出了非阻塞IO.对此我一直有两点疑惑:1.tomcat8底层已经默认使用NIO了,不是已经是IO非阻塞了吗,怎么又说servlet3.1解决了非阻塞.2.关于异步,如果开发者在serlvet中开一个业务线程来实现,也算异步,为什么3.0还提供了一个组件来解决,那么这种方式和开发者自己开个

第五节：JQuery框架源码简析（1）

(转自老惠的博客) JQuery是一个应用广泛.非常优秀的JavaScript框架,其代码简洁而优雅,有很多值得我们学习的地方.这里仅仅对其代码结构做一个简单的分析,方便大家的理解和学习. 我们进行分析.分解的基准版本是jQuery1.7.1. 开始之前,请准备好以下素材和工具: jQuery源代码:jquery-1.7.1.js 文本编辑器:EditPlus,或者你喜欢的 参考书:<jQuery高级编程>.<jQuery技术内幕:深入解析jQuery架构设计与实现原理>.<

Android -- Camera源码简析，启动流程

com.android.camera.Camera.java,主要的实现Activity,继承于ActivityBase. ActivityBase 在ActivityBase中执行流程: onCreate中进行判断是否是平板: onResume中判断是否锁屏,锁屏&camera不存在时候,mOnResumePending置为true,否则置为false并执行doOnResume: onWindowFocusChanged中判断是否获取到焦点&mOnResumePending,满足的话执行