Pinia? 是 Vue 新的官方狀態(tài)管理庫，兼容 Vue2 和 Vue3，替代 VueX。與它要替換的 VueX 相比，它提供了更簡(jiǎn)單、更簡(jiǎn)潔的 API，并引入了對(duì) Typescript 的原生支持。擁有使用 VueX 的現(xiàn)有項(xiàng)目的 Vue 開發(fā)人員會(huì)想要切換到 Pinia，因?yàn)?VueX 將不再得到官方支持，并且開始新的 Vue 項(xiàng)目的開發(fā)人員可能出于同樣的原因想要使用 Pinia。Pinia 得到了 Vue devtools 的支持，但是因?yàn)?Pinia 和 Vue 3 剛剛在今年早些時(shí)候發(fā)布，所以這些 devtools 目前缺少 Pinia 的一些功能，特別是時(shí)間旅行調(diào)試。

時(shí)間旅行調(diào)試是一種工具，可用于捕獲進(jìn)程執(zhí)行時(shí)跟蹤，然后在以后向前和向后重播進(jìn)程。時(shí)間旅行調(diào)試可以幫助你更輕松地調(diào)試問題，方法是讓你“倒退”調(diào)試器會(huì)話，而無需重現(xiàn)問題，直到找到 bug。

而 Colada 就是 Pinia 的完美伴侶，注意到這種缺乏時(shí)間旅行調(diào)試的能力，所以我們決定在 Chrome 擴(kuò)展中實(shí)現(xiàn)它，并為現(xiàn)有的 Vue 開發(fā)工具提供一個(gè)插件。你可以在你的 Vue-Pinia 應(yīng)用程序中安裝 Colada 插件，并點(diǎn)擊代表存儲(chǔ)變化的節(jié)點(diǎn)，動(dòng)態(tài)改變應(yīng)用程序的狀態(tài)，回到以前的快照，改善 Vue-Pinia 應(yīng)用程序的調(diào)試過程中的復(fù)雜狀態(tài)變化。此外，如果你在安裝插件的同時(shí)安裝 Colada Chrome 擴(kuò)展，你可以訪問一個(gè)單獨(dú)的 Chrome devtools 面板，提供同樣的時(shí)間旅行功能和增強(qiáng)的 UI。

核心功能

• 直接集成到 Vue.js DevTools ，因此開發(fā)人員可以使用 Colada 而無需離開他們現(xiàn)有的 devtool 配置。

• ??? 時(shí)間旅行調(diào)試。
• ?? 用于查看 Vue 應(yīng)用程序的 Pinia 狀態(tài)的檢查器面板。

• 一個(gè) Chrome DevTool 擴(kuò)展，提供相同的功能和增強(qiáng)的 UI。

Vue.js DevTools 插件

Colada Chrome DevTool 擴(kuò)展

安裝

安裝：VueDevTools 插件

1. 確保已安裝 Vue.js DevTools 擴(kuò)展。
2. 在應(yīng)用的根目錄中安裝 Colada npm 包：npm install colada-plugin --save-dev。
3. 將 Colada 添加到你的 Vue 應(yīng)用程序。

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');

安裝：Chrome 擴(kuò)展

確保已安裝 Vue.js DevTools。Colada Chrome 擴(kuò)展有兩種安裝方式：

從 Chrome Web Store 安裝

1. 按照上面的說明將 colada-plugin 添加到你的 Vue 應(yīng)用程序中。
2. 導(dǎo)航到 Chrome Web Store 上的 Colada，然后單擊添加到 Chrome 進(jìn)行安裝。

從源碼安裝

1. 按照上面的說明將 colada-plugin 添加到你的 Vue 應(yīng)用程序中。
2. 將 colada 存儲(chǔ)庫（https://github.com/oslabs-beta/colada）克隆到你的計(jì)算機(jī)。
3. 運(yùn)行命令cd colada-extension && npm install && npm run build。
4. 這將在/colada-extension 中創(chuàng)建一個(gè)新的 /dist 目錄。
5. 在 Chrome 中，導(dǎo)航到 chrome://extensions 。
6. 在擴(kuò)展頁面的右上角，有一個(gè)“開發(fā)者模式”的開關(guān)，確保將其切換為ON。
7. 在頁面左上角，選擇“Load Unpacked”，選擇colada/colada-extension/dist 目錄。

使用

使用 Colada Vue.js 開發(fā)工具插件

• 導(dǎo)航到 Vue.js 開發(fā)工具。

時(shí)間旅行調(diào)試

• 在時(shí)間線視圖中選擇Colada 時(shí)間線。
• 關(guān)閉屏幕截圖。
• 單擊時(shí)間軸上自動(dòng)跟蹤的事件以穿越時(shí)間并更新應(yīng)用程序的狀態(tài)。

Inspector Panel - 實(shí)時(shí)查看應(yīng)用程序狀態(tài)！

• 在組件菜單下拉菜單中選擇Colada
• 單擊你的 Pinia store 以查看實(shí)時(shí)更新的狀態(tài)、操作和 getter。

Colada Plugin Timeline

Colada Plugin - Turn off screenshots

Colada Plugin - Inspector Panel

Colada Plugin - Navigate to Extension

Colada Timeline - Enables time-travel debugging

Git 倉庫：https://github.com/oslabs-beta/colada。