Vuex源码学习笔记（一）

本系列目前打算出20～40期，详细讲解Vuex项目所有的方方面面，对于初学者很友好，如有建议请提出。

在学习源码之前，要问清楚自己为什么要学习Vuex源码？千万不要盲目的去为了学源码而学源码。那么对于我来说学习Vuex源码可以给我带来以下的收获：

• 可以学习到开源项目的架构方式
• 提升自己JS的编程水平
• 使用Vuex更加的知其然知其所以然，得心应手
• 增加面试的谈资
• 等等等等

开始学习

首先我们要去Github仓库找到Vuex的Git仓库：https://github.com/vuejs/vuex

目前来说Vuex主要有两个版本，分别为：Vuex3和Vuex4。

Vuex3主要用于Vue2.x，而Vuex4主要用于Vue3.x版本。

我们可以看到Vuex的Git仓库有很多分支：

那么目前来说，主要在用的分支有两个，分别为dev分支对应着Vuex3，4.0分支对应Vuex4。

接下来我们通过Git把代码拉到本地：

git clone https://github.com/vuejs/vuex.git

然后通过VS Code后者其他编辑器打开项目：

code ./vuex

Vuex整体项目目录如下：

├── .circleci // 用来执行CI自动化测试
├── .github // 存放一些Git提交规范，项目参与规范
├── dist // 构建后的Vuex JavaScript文件
├── docs // Vuex的文档
├── examples // 开发Vuex用的的例子
├── scripts // 一些npm脚本
├── src // Vuex所有源码
├── test // Vuex测试代码
├── types // Vuex TS类型文件
├── .babelrc // babel配置文件
├── .eslintrc.json // eslint配置文件
├── .gitignore // git忽略文件
├── CHANGELOG.md // 版本发布记录
├── LICENSE // 开源协议
├── README.md // Vuex简介
├── jest.config.js // jest测试框架配置
├── package.json // 项目元信息
├── rollup.config.js // rollup
└── yarn.lock // yarn 锁文件

在了解完大致的项目结构后，我们就要来运行起来Vuex项目：

首先来安装项目依赖：

yarn
# 或
npm install

然后打开package.json文件

"scripts": {
     
  "dev": "node examples/server.js",
  "build": "node scripts/build.js",
  "lint": "eslint src test",
  ...
}

可以看到package.json文件中的scripts有很多的命令，后面我们再去探究每个命令的作用，现在我们只需要用到第一个

npm run dev

运行成功后，可以看到如下输出信息：

Server listening on http://localhost:8080, Ctrl+C to stop
webpack built 7b2d1015581dff78643f in 2415ms
ℹ ｢wdm｣: Hash: 7b2d1015581dff78643f
Version: webpack 4.46.0
Time: 2415ms
Built at: 2021-11-19 23:35:11
                       Asset      Size                     Chunks             Chunk Names
             classic/chat.js  33.5 KiB               classic/chat  [emitted]  classic/chat
      classic/counter-hot.js  33.5 KiB        classic/counter-hot  [emitted]  classic/counter-hot
          classic/counter.js  33.5 KiB            classic/counter  [emitted]  classic/counter
    classic/shopping-cart.js  33.5 KiB      classic/shopping-cart  [emitted]  classic/shopping-cart
          classic/todomvc.js  33.5 KiB            classic/todomvc  [emitted]  classic/todomvc
         composition/chat.js  33.5 KiB           composition/chat  [emitted]  composition/chat
  composition/counter-hot.js  33.5 KiB    composition/counter-hot  [emitted]  composition/counter-hot
      composition/counter.js  33.5 KiB        composition/counter  [emitted]  composition/counter
composition/shopping-cart.js  33.5 KiB  composition/shopping-cart  [emitted]  composition/shopping-cart
      composition/todomvc.js  33.5 KiB        composition/todomvc  [emitted]  composition/todomvc
                   shared.js  1.15 MiB                     shared  [emitted]  shared
Entrypoint classic/chat = shared.js classic/chat.js
Entrypoint classic/counter = shared.js classic/counter.js
Entrypoint classic/counter-hot = shared.js classic/counter-hot.js
Entrypoint classic/shopping-cart = shared.js classic/shopping-cart.js
Entrypoint classic/todomvc = shared.js classic/todomvc.js
Entrypoint composition/chat = shared.js composition/chat.js
Entrypoint composition/counter = shared.js composition/counter.js
Entrypoint composition/counter-hot = shared.js composition/counter-hot.js
Entrypoint composition/shopping-cart = shared.js composition/shopping-cart.js
Entrypoint composition/todomvc = shared.js composition/todomvc.js
[0] multi webpack-hot-middleware/client ./examples/classic/chat/app.js 40 bytes {shared} [built]
[1] multi webpack-hot-middleware/client ./examples/classic/counter/app.js 40 bytes {shared} [built]
[2] multi webpack-hot-middleware/client ./examples/classic/counter-hot/app.js 40 bytes {shared} [built]
[3] multi webpack-hot-middleware/client ./examples/classic/shopping-cart/app.js 40 bytes {shared} [built]
[4] multi webpack-hot-middleware/client ./examples/classic/todomvc/app.js 40 bytes {shared} [built]
[5] multi webpack-hot-middleware/client ./examples/composition/chat/app.js 40 bytes {shared} [built]
[6] multi webpack-hot-middleware/client ./examples/composition/counter/app.js 40 bytes {shared} [built]
[7] multi webpack-hot-middleware/client ./examples/composition/counter-hot/app.js 40 bytes {shared} [built]
[8] multi webpack-hot-middleware/client ./examples/composition/shopping-cart/app.js 40 bytes {shared} [built]
[9] multi webpack-hot-middleware/client ./examples/composition/todomvc/app.js 40 bytes {shared} [built]
[./examples/classic/chat/app.js] 235 bytes {shared} [built]
[./examples/classic/counter-hot/app.js] 187 bytes {shared} [built]
[./examples/classic/counter/app.js] 163 bytes {shared} [built]
[./examples/classic/shopping-cart/app.js] 201 bytes {shared} [built]
[./examples/classic/todomvc/app.js] 162 bytes {shared} [built]
    + 218 hidden modules
ℹ ｢wdm｣: Compiled successfully.

我们打开http://localhost:8080

可以看到：

现在我们的Vuex项目算是正式的跑起来了，明天我们来接着来分析这是怎么运行起来的。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新