Vue 源码的博客已经写了三四个月了,总共写了三十多篇文章,感兴趣的同学可以点击这里进行查看。今天,我开始一个新的系列 —— Vuex 库的源码阅读,相信使用了 Vue 的同学对 Vuex 这个库也是非常的熟悉,Vuex 是 Vue 框架专有的一个集中式的状态管理仓库,在我们平时的开发中经常被使用到,相比于 Vue 的源码,Vuex 的源码要简单很多,只需几篇文章就可以讲清楚,让我们先从 Vuex 库的目录结构开始看,具体内容如下所示:
├─dist // 存放编译后代码的目录
├─scripts // 存放工程化脚本文件的目录
| ├─build.js // 导出一个具体构建功能的函数,构建的流程包括:
| | // (1) rollup 编译代码;
| | // (2) copy 编译出的文件到 dist 目录下
| | // (3) console 输出文件的尺寸信息
| ├─build-main.js // 导入 build.js 导出的函数,构建该库的功能代码
| ├─build-logger.js // 导入 build.js 导出的函数,构建 logger 插件的代码
| └release.js // 发布的脚本,该脚本是互动式的,就像 vue 创建项目的脚手架一样,
| // 你可以选择相关的选项,由脚本帮你做发布这件事,非常的有趣,很值得我们借鉴和学习
├─src // 源码目录
| ├─module //
| | ├─module-collection.js // 用于构建 Vuex 的模块树
| | └module.js // 用于构建 Vuex 中的一个个模块
| ├─plugins //
| | ├─devtool.js // 与 Vue DevTools 有关的插件
| | └logger.js // Vuex 自动的 logger 插件
| ├─helpers.js // Vuex 库提供的辅助函数,例如:mapState、mapGetters、mapActions
| ├─index.cjs.js // 源码的主入口,该文件用于 umd、cjs 模块化规范的打包
| ├─index.js // 源码的主入口,该文件用于 es 模块化规范的打包
| ├─index.mjs // .mjs 是什么文件呢?因为 ESM 和 CJS 的加载方式不同,为了在 node 的环境下更好的区分这两种不同的加载方式,于是创建了 .mjs
| | // .mjs 就是表示当前文件用 ESM 的方式进行加载,如果是普通的 .js 文件,则采用 CJS 的方式加载
| ├─mixin.js // 将 Store 的实例注册到每一个 Vue 的实例对象中,这样 Vue 的实例对象就能通过 this.$store 拿到 Store 的实例了
| ├─store.js // Vuex 功能实现的主要文件,主要就是看 Store 类的 constructor 方法中一系列的操作,详情见 -- 流程分析
| ├─util.js // 提供一些工具函数
├─test //
| ├─unit // 单元测试
| ├─esm // 测试在 node 的环境下,根据 ES 模块化规范导入的模块和根据 CommonJS 模块化规范导入的模块是否等价
| ├─e2e // 端到端测试(集成测试)
├─types // 项目的 Typescript 文件
├─jest.config.js // jest 测试框架的配置文件
├─package.json // 整个项目的配置文件
├─rollup.config.js // 导出一个能够生成 rollup 配置对象的函数
├─rollup.main.config.js // 导入 rollup.config.js 导出的函数,利用该函数生成用于构建库功能代码的 rollup 配置对象
├─rollup.logger.config.js // 导入 rollup.config.js 导出的函数,利用该函数生成用于构建 logger 插件的 rollup 配置对象