Vuex2.0源码(上)教程.docx

Vuex 2.0 源码分析（上） 既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 当我们用 Vue.js 开发一个中到大型的单页应用时，经常会遇到如下问题： 如何让多个 Vue 组件共享状态 Vue 组件间如何通讯 通常，在项目不是很复杂的时候，我们会利用全局事件总线 （global event bus）解决，但是随着复杂度的提升，这些代码将变的难以维护。因此，我们需要一种更加好用的解决方案，于是，Vuex 诞生了。 本文并不是 Vuex 的科普文章，对于还不了解 Vuex 的同学，建议先移步? HYPERLINK /en/index.html \t /article/_blank Vuex 官方文档；看英文文档吃力的同学，可以看? HYPERLINK /vuex/ \t /article/_blank Vuex 的中文文档。 Vuex 的设计思想受到了 Flux，Redux 和 The Elm Architecture 的启发，它的实现又十分巧妙，和 Vue.js 配合相得益彰，下面就让我们一起来看它的实现吧。 目录结构 Vuex 的源码托管在? HYPERLINK /vuejs/vuex \t /article/_blank github，我们首先通过 git 把代码 clone 到本地，选一款适合自己的 IDE 打开源码，展开 src 目录，如下图所示： src 目录下的文件并不多，包含几个 js 文件和 plugins 目录， plugins 目录里面包含 2 个 Vuex 的内置插件，整个源码加起来不过 500-600 行，可谓非常轻巧的一个库。 麻雀虽小，五脏俱全，我们先直观的感受一下源码的结构，接下来看一下其中的实现细节。 源码分析 本文的源码分析过程不会是自上而下的给代码加注释，我更倾向于是从 Vuex 提供的 API 和我们的使用方法等维度去分析。Vuex 的源码是基于 es6 的语法编写的，对于不了解 es6 的同学，建议还是先学习一下 es6。 从入口开始 看源码一般是从入口开始，Vuex 源码的入口是 src/index.js，先来打开这个文件。 我们首先看这个库的 export ，在 index.js 代码最后。 export default { Store, install, mapState, mapMutations, mapGetters, mapActions} 这里可以一目了然地看到 Vuex 对外暴露的 API。其中, Store 是 Vuex 提供的状态存储类，通常我们使用 Vuex 就是通过创建 Store 的实例，稍后我们会详细介绍。接着是 install 方法，这个方法通常是我们编写第三方 Vue 插件的“套路”，先来看一下“套路”代码： function install (_Vue) { if (Vue) { console.error( [vuex] already installed. Vue.use(Vuex) should be called only once. ) return } Vue = _Vue applyMixin(Vue)} // auto install in dist modeif (typeof window !== undefined window.Vue) { install(window.Vue)} 我们实现了一个 install 方法，这个方法当我们全局引用 Vue ，也就是 window 上有 Vue 对象的时候，会手动调用 install 方法，并传入 Vue 的引用；当 Vue 通过 npm 安装到项目中的时候，我们在代码中引入第三方 Vue 插件通常会编写如下代码： import Vue from vueimport Vuex from vuex...Vue.use(Vuex) 当我们执行 Vue.use(Vuex) 这句代码的时候，实际上就是调用了 install 的方法并传入 Vue 的引用。install 方法顾名思义，现在让我们来看看它的实现。它接受了一个参数 _Vue，函数体首先判断 Vue ，这个变量的定义在 index.js 文件的开头部分： let Vue // bind on install 对 Vue 的判断主要是保证 install 方法只执行一次，这里把 install 方法的参数 _Vue 对象赋值给 Vue 变量，这样我们就可以在 index.js 文件