前言

今天我们来开个新坑，来看下pinia的源码。

pinia官方文档：Introduction | Pinia (vuejs.org)

配置环境

和前面学习vue3源码一样，都是准备能在vscode中调试就绝对不去浏览器调试，即使是运行时代码。

拉代码

第一步自然就是拉代码，和之前一样，我们先fork一份源码，然后拉我们fork的那份到本机，这样我们随意改动也不会有心理负担。

安装依赖

我们这里用pnpm（注意node版本，我个人调试环境是v18.8.0），因为这是个monorepo, 简单的说就是一个仓库中包含多个包，管理起来方便。vue仓库也是这种管理方式。

测试工具vitest

一般比较规范的仓库都是自带开箱即用的测试用例和测试环境的，一般用的是jest。

包拉下来之后点开.vscode文件夹，里面一般会有一个launch.json的文件，这里就是调试环境的配置：

当你F5运行时你会遇到如下报错：

很简洁的提示找不到jest，因为pinia用的是vitest

vitest是vue官方自主研发的 开发世界。。。 基于vite的下一代测试框架（next generation testing framework）。

我前面有写过相关的介绍文章，这里就不多赘述：Vitest学习 - 知乎 (zhihu.com)

vscode拓展

vitest官方也有提供debugger的教程：Debugging | Guide | Vitest

不过众所周知我是“懒得配置”那种人，所以自然会去找是否存在工具可以一步到位。

和jest-runner一样，vitest也有可以直接进入调试状态的工具：

1. rluvaton/vitest-vs-code-plugin，和jest-runner一样，都是有run、debug的按钮悬停在测试用例上面的，很方便
   
   
2. vitest-dev/vscode，官方提供的vscode一步到位工具，功能和上面的差不多，不过操作方式不太一样：
   

个人比较推荐官方的，毕竟是官方出品。。

当然，如果你非要用jest，也不是不行，自行安装即可。

总结

现在我们环境已经准备好了，接下来就是愉快的 反击时间 源码阅读之旅了。