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

2023-02-28

应用程序 vue 时间

Pinia 是Vue新的官方状态管理库，兼容Vue2和Vue3，替代 VueX。与它要替换的VueX相比，它提供了更简单、更简洁的API，并引入了对Typescript的原生支持。拥有使用VueX的现有项目的Vue开发人员会想要切换到Pinia，因为VueX将不再得到官方支持，

Pinia 是 Vue 新的官方状态管理库，兼容 Vue2 和 Vue3，替代 VueX。与它要替换的 VueX 相比，它提供了更简单、更简洁的 API，并引入了对 Typescript 的原生支持。拥有使用 VueX 的现有项目的 Vue 开发人员会想要切换到 Pinia，因为 VueX 将不再得到官方支持，并且开始新的 Vue 项目的开发人员可能出于同样的原因想要使用 Pinia。Pinia 得到了 Vue devtools 的支持，但是因为 Pinia 和 Vue 3 刚刚在今年早些时候发布，所以这些 devtools 目前缺少 Pinia 的一些功能，特别是时间旅行调试。

时间旅行调试是一种工具，可用于捕获进程执行时跟踪，然后在以后向前和向后重播进程。时间旅行调试可以帮助你更轻松地调试问题，方法是让你“倒退”调试器会话，而无需重现问题，直到找到 bug。

而 Colada 就是 Pinia 的完美伴侣，注意到这种缺乏时间旅行调试的能力，所以我们决定在 Chrome 扩展中实现它，并为现有的 Vue 开发工具提供一个插件。你可以在你的 Vue-Pinia 应用程序中安装 Colada 插件，并点击代表存储变化的节点，动态改变应用程序的状态，回到以前的快照，改善 Vue-Pinia 应用程序的调试过程中的复杂状态变化。此外，如果你在安装插件的同时安装 Colada Chrome 扩展，你可以访问一个单独的 Chrome devtools 面板，提供同样的时间旅行功能和增强的 UI。

核心功能

直接集成到 Vue.js DevTools ，因此开发人员可以使用 Colada 而无需离开他们现有的 devtool 配置。

🕰️ 时间旅行调试。
🔎 用于查看 Vue 应用程序的 Pinia 状态的检查器面板。

一个 Chrome DevTool 扩展，提供相同的功能和增强的 UI。

Vue.js DevTools 插件

Colada Chrome DevTool 扩展

安装

安装：VueDevTools 插件

确保已安装 Vue.js DevTools 扩展。
在应用的根目录中安装 Colada npm 包：npm install colada-plugin --save-dev。
将 Colada 添加到你的 Vue 应用程序。

import { createApp } from 'vue';  
import { createPinia } from 'pinia';  
import Colada, { PiniaColadaPlugin } from 'colada-plugin';  
import App from './App.vue';   
const app = createApp(App);  
const pinia = createPinia();  
app.use(pinia);  
pinia.use(PiniaColadaPlugin);  
app.use(Colada);  
app.mount('#app');1.
2.
3.
4.
5.
6.
7.
8.
9.
10.