为 Vue 官方状态库 Pinia 增加时间旅行调试功能 - Colada

,Pinia​ 是 Vue 新的官方状态管理库，兼容 Vue2 和 Vue3，替代 VueX。与它要替换的 VueX 相比，它提供了更简单、更简洁的 API，并引入了对 Typescript 的原生支持。拥有使用 VueX 的现有项目的 Vue 开发人员会想要切换到 Pinia，因为 VueX 将不再得到官方支持，并且开始新的 Vue 项目的开发人员可能出于同样的原因想要使用 Pinia。Pinia 得到了 Vue devtools 的支持，但是因为 Pinia 和 Vue 3 刚刚在今年早些时候发布，所以这些 devtools 目前缺少 Pinia 的一些功能，特别是时间旅行调试。,而 Colada 就是 Pinia 的完美伴侣，注意到这种缺乏时间旅行调试的能力，所以我们决定在 Chrome 扩展中实现它，并为现有的 Vue 开发工具提供一个插件。你可以在你的 Vue-Pinia 应用程序中安装 Colada 插件，并点击代表存储变化的节点，动态改变应用程序的状态，回到以前的快照，改善 Vue-Pinia 应用程序的调试过程中的复杂状态变化。此外，如果你在安装插件的同时安装 Colada Chrome 扩展，你可以访问一个单独的 Chrome devtools 面板，提供同样的时间旅行功能和增强的 UI。,,,Vue.js DevTools 插件,,Colada Chrome DevTool 扩展,确保已安装 Vue.js DevTools。Colada Chrome 扩展有两种安装方式：,,Inspector Panel - 实时查看应用程序状态！,,Colada Plugin Timeline,,Colada Plugin - Turn off screenshots,,Colada Plugin - Inspector Panel,,Colada Plugin - Navigate to Extension,,Colada Timeline - Enables time-travel debugging