专栏导航
前言
经过vue3从beta版本走向默认版本，vue2.x更新最后一个版本Naruto，全局状态管理也从vuex慢慢转向更加易用更加契合vue3的pinia。
本系列文章将会带领大家从源码角度去理解下一代vue全局状态管理库 pinia 的实现原理。
参考源码pinia V2.0.14
源码分析仓库：github.com/vkcyan/mini…
工欲善其事，必先利其器，我们应该如何去阅读pinia的源码呢？本文将手摸手教大家如何在vue3环境搭建pinia源码阅读环境。
创建源码分析环境
我们使用vue3开箱即用的CLI初始化一个项目，创建项目非常简单，不做过多赘述。
npm init vue@latest
pinia源码入口分析
先去pinia的官方仓库下载源码
源码地址：github.com/vuejs/pinia，我们将其clone到本地
git clone https://github.com/vuejs/pinia.git
首先分析pinia仓库的打包文件，寻找源代码位置
源码地址
在pinia/packages/package.json中，我们找到了打包命令，打包命令中可以得知，打包文件为../../rollup.config.js
在打包文件中，我们找到了被打包源码的入口文件，即为pinia/packages/pinia/src/index.ts
仓库依赖
在打包文件rollup.config.js中line121标注了依赖文件，不过我们通过CLI生成的项目中已经包含了以下依赖文件，所以这一步我们不需要额外操作。
环境变量
源码中存在大量环境变量注入代码，具体配置在rollup.config.js中line121；如果缺失环境变量声明，会导致源码无法正常运行。
所以在源码阅读环境，我们需要添加合适的环境变量，让源码正常运行起来。
环境适配
将pinia/packages/pinia目录下的所有文件复制到我们之前通过CLI生成项目的/src中。
并根据我们通过源码入口分析获取的信息进行环境变量补全。
在vite.config.ts增加环境变量
define: {
__DEV__: "true", // 是否开发环境
__TEST__: "false", // 是否测试环境
},
全局环境变量报错
我们在vite的配置文件中向运行环境注入了pinia必要的环境变量，但是TypeScript并不认识相关全局变量，便会发出警告。
我们需要将源码中的pinia/packages/pinia/src/global.d.ts文件内的声明复制到项目中的env.d.ts即可。
/// <reference types="vite/client" />
// Global compile-time constants
declare var __DEV__: boolean;
declare var __TEST__: boolean;
declare var __FEATURE_PROD_DEVTOOLS__: boolean;
declare var __BROWSER__: boolean;
declare var __CI__: boolean;
declare var __VUE_DEVTOOLS_TOAST__: (
message: string,
type?: "normal" | "error" | "warn"
) => void;
至此，我们解决了项目静态检查阶段中所有报错信息，接下来我们启动项目。
浏览器控制台报错'...ComputedRef'
启动项目后，在浏览器控制台收获了一个报错信息
我们找到报错代码type.ts进行分析
错误提示已经非常贴心，可以得知是tsconfig.json配置问题，我们根据报错信息修改配置
出现报错的原因是因为这里vue CLI生成的代码自带一份配置文件，此文件与pinia源码的tsconfig部分配置发生了冲突。
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"importsNotUsedAsValues": "remove", // 默认被设置为error error情况下类型导入必须增加前缀type 以区分类型 改成remove即可
"preserveValueImports": false // 对于类型，在同时启用了 "preserveValueImports" 和 "isolatedModules" 时，必须使用仅类型导入进行导入；改成false即可
},
"references": [
{
"path": "./tsconfig.config.json"
}
]
}
源码分析环境测试
在源码处增加打印，测试pinia源码是否正常运行。
log被正常打印，说明pinia源码已经被正常运行。
如果感觉搭建环境过于繁琐，又想阅读pinia源码，可以直接clone项目，github.com/vkcyan/goto…，开箱即用~
结语
至此，我们便完成了万里长征第一步；植入的源码文件被正常运行，我们便可以通过log debug的方式来进行逻辑观测，接下来我们将正式开始pinia核心实现的探索之旅~
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
