前言#
今天我们来开个新坑，来看下pinia的源码。
pinia官方文档：Introduction | Pinia (vuejs.org)
配置环境#
和前面学习vue3源码一样，都是准备能在vscode中调试就绝对不去浏览器调试，即使是运行时代码。
拉代码#
第一步自然就是拉代码，和之前一样，我们先fork一份源码，然后拉我们fork的那份到本机，这样我们随意改动也不会有心理负担。
git clone https://github.com/1714080902120/pinia_source_code_debug_study.git安装依赖#
我们这里用pnpm（注意node版本，我个人调试环境是v18.8.0），因为这是个monorepo, 简单的说就是一个仓库中包含多个包，管理起来方便。vue仓库也是这种管理方式。
pnpm install测试工具vitest#
一般比较规范的仓库都是自带开箱即用的测试用例和测试环境的，一般用的是jest。
包拉下来之后点开.vscode文件夹，里面一般会有一个launch.json的文件，这里就是调试环境的配置：
{
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"cwd": "${workspaceFolder}",
"runtimeExecutable": "yarn",
"args": [
"jest",
"--watch",
"--runInBand",
"--watchAll=false",
"--collectCoverage=false"
]
}
]
}
当你F5运行时你会遇到如下报错：
error Command "jest" not found. Did you mean "test"?
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Waiting for the debugger to disconnect...很简洁的提示找不到jest，因为pinia用的是vitest
vitest是vue官方自主研发的 开发世界。。。 基于vite的下一代测试框架（next generation testing framework）。
我前面有写过相关的介绍文章，这里就不多赘述：Vitest学习 - 知乎 (zhihu.com)
vscode拓展#
vitest官方也有提供debugger的教程：Debugging | Guide | Vitest
不过众所周知我是“懒得配置”那种人，所以自然会去找是否存在工具可以一步到位。
和jest-runner一样，vitest也有可以直接进入调试状态的工具：
-
rluvaton/vitest-vs-code-plugin，和
jest-runner一样，都是有run、debug的按钮悬停在测试用例上面的，很方便
-
vitest-dev/vscode，官方提供的
vscode一步到位工具，功能和上面的差不多，不过操作方式不太一样：
个人比较推荐官方的，毕竟是官方出品。。
当然，如果你非要用jest，也不是不行，自行安装即可。
总结#
现在我们环境已经准备好了，接下来就是愉快的 反击时间 源码阅读之旅了。