콜라다를 소개합니다

Vue의 공식 상태 관리 라이브러리인 Pinia 🍍를 위한 시간 여행 디버깅

피니아 🍍

Pinia는 Vue2 및 Vue3와 호환되는 VueX를 대체하는 새로운 공식 상태 관리 라이브러리입니다. 대체하는 이전 VueX 버전과 비교할 때 더 단순하고 덜 장황한 API를 제공하며 Typescript에 대한 기본 지원을 도입합니다. VueX를 사용하는 기존 프로젝트가 있는 Vue 개발자는 Pinia로 전환하기를 원할 것입니다. 왜냐하면 VueX는 더 이상 공식적으로 지원되지 않을 것이기 때문이며 새로운 Vue 프로젝트를 시작하는 개발자는 같은 이유로 Pinia를 사용하기를 원할 것입니다. Pinia는 Vue devtools의 지원과 함께 제공되지만 Pinia 및 Vue 3이 올해 초에 출시되었기 때문에 devtools에는 현재 Pinia를 위한 일부 기능, 특히 시간 여행 디버깅이 부족합니다.

콜라다🥥

피니아의 완벽한 동반자, 콜라다를 만나보세요! 이러한 시간 여행 기능의 부족을 인식하고 기존 Vue devtools용 플러그인뿐만 아니라 크롬 확장에 구현하기로 결정했습니다. Vue-Pinia 애플리케이션에 Colada 플러그인을 설치하고 스토어 변경 사항을 나타내는 노드를 클릭하여 앱 상태를 이전 스냅샷으로 동적으로 변경하여 복잡한 상태 변경이 있는 Vue-Pinia 앱의 디버깅 프로세스를 개선할 수 있습니다. 또한 플러그인과 함께 Colada 크롬 확장 프로그램을 설치하면 향상된 UI로 동일한 시간 여행 기능을 제공하는 별도의 Chrome devtools 패널에 액세스할 수 있습니다.

자세히 알아보고 시작하려면 당사documentation here.를 참조하십시오.

핵심 기능

🔄 Vue.js DevTools에 직접 통합되어 개발자가 기존 devtool 구성을 종료하지 않고도 Colada를 사용할 수 있습니다.
🕰️ 시간 여행 디버깅
🔎 Vue 앱의 Pinia 상태를 보기 위한 검사기 패널

향상된 UI로 동일한 기능을 제공하는 Chrome DevTool 확장 프로그램입니다.

시작하기

설치: VueDevTools 플러그인

Vue.js DevTools extension이 설치되어 있는지 확인합니다

.

앱의 루트 디렉터리에 Colada npm package을 설치합니다.npm install colada-plugin --save-dev

Vue 앱에 Colada 추가

// main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
// import Colada Plugin
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');

설치: 크롬 확장 프로그램

Vue.js DevTools가 설치되어 있는지 확인하세요.

Colada Chrome 확장 프로그램을 설치하는 방법에는 두 가지가 있습니다.
Chrome 웹 스토어에서 설치

Vue 앱에 colada-plugin을 추가하려면 위의 지침을 따르십시오.
Colada on the Chrome Web Store으로 이동하여 "Chrome에 추가"를 클릭합니다.

소스에서 설치

Vue 앱에 colada-plugin를 추가하려면 위의 지침을 따르십시오.

colada repository을 시스템에 복제합니다.

다음 명령을 실행합니다.

cd colada-extension
npm install
npm run build

이렇게 하면 /dist에 새 /colada-extension 디렉토리가 생성됩니다.

Chrome에서 chrome://extensions로 이동합니다

.

확장 프로그램 페이지의 오른쪽 상단에 "개발자 모드"토글이 있습니다. 이것이 켜져 있는지 확인하십시오.

페이지 왼쪽 상단에서 "Load Unpacked"를 선택하고 colada/colada-extension/dist 디렉토리

를 선택합니다.

앞으로의 기능

Vue 구성 요소 간의 데이터 흐름을 시각화하고 디버깅에 추가 도움을 주는 대화형 구성 요소 트리 그래프

콜라다 링크

Github | Documentation

콜라다팀

파커 스타인버그 | GitHub |

조나단 첸 | Github |

본 술릿 | Github |

댄 스타인브룩 | Github |