Отладка путешествия во времени для Pinia🍍, официальной библиотеки управления состоянием Vue

Пиния 🍍

Pinia — это новая официальная библиотека управления состоянием для Vue, совместимая с Vue2 и Vue3, заменяющая VueX. По сравнению с предыдущими версиями VueX, которые он заменяет, он предлагает более простой и менее подробный API и вводит встроенную поддержку Typescript. Разработчики Vue, у которых есть проекты, использующие VueX, захотят переключиться на Pinia, потому что VueX больше не будет официально поддерживаться, и разработчики, начинающие новые проекты Vue, вероятно, захотят использовать Pinia по той же причине. Pinia поставляется с поддержкой Vue devtools, однако, поскольку Pinia и Vue 3 были выпущены чуть ранее в этом году, в devtools в настоящее время отсутствуют некоторые функции для Pinia, в частности, отладка путешествий во времени.

Колада 🥥

Введите Colada, идеальный компаньон для Pinia! Заметив отсутствие возможности путешествовать во времени, мы решили реализовать ее в расширении для Chrome, а также в виде плагина для существующих инструментов разработки Vue. Вы можете установить плагин Colada в свое приложение Vue-Pinia и нажимать на узлы, представляющие изменения в магазине, чтобы динамически изменять состояние приложения до предыдущих снимков, улучшая процесс отладки для приложений Vue-Pinia со сложными изменениями состояния. Кроме того, если вы установите расширение Colada для Chrome вместе с плагином, вы сможете получить доступ к отдельной панели инструментов разработчика Chrome, предлагающей те же функции путешествий во времени с улучшенным пользовательским интерфейсом.

Чтобы узнать больше и начать работу, ознакомьтесь с нашей документацией здесь.

Основные особенности

  • 🔄 Прямая интеграция в Vue.js DevTools, поэтому разработчики могут использовать Colada, не выходя из существующей конфигурации инструмента разработки
    - 🕰️ Отладка во времени
    - 🔎 Панель инспектора для просмотра состояния Pinia вашего приложения Vue
  • Расширение Chrome DevTool, предоставляющее те же функции с улучшенным пользовательским интерфейсом.

Начиная

Установка: Плагин VueDevTools

  1. Убедитесь, что установлено расширение Vue.js DevTools.
  2. Установите Пакет Colada npm в корневой каталог вашего приложения
    npm install colada-plugin --save-dev
  3. Добавьте Colada в свое приложение Vue
// 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');

Установка: Расширение Chrome

Убедитесь, что у вас установлен Vue.js DevTools.

Есть два способа установить расширение Colada Chrome:

Установить из Интернет-магазина Chrome

  1. Следуйте приведенным выше инструкциям, чтобы добавить colada-plugin в ваше приложение Vue.
  2. Перейдите к Colada в Интернет-магазине Chrome и нажмите Добавить в Chrome.

Установить из исходного кода

  1. Следуйте инструкциям выше, чтобы добавить colada-plugin в ваше приложение Vue.
  2. Клонируйте репозиторий colada на свой компьютер.
  3. Выполните следующие команды
    cd colada-extension
    npm install
    npm run build
  4. Это создаст новый каталог /dist в /colada-extension.
  5. В Chrome перейдите к chrome://extensions
  6. В правом верхнем углу страницы расширений есть переключатель «Режим разработчика». Убедитесь, что эта функция включена ON.
  7. В левом верхнем углу страницы выберите «Загрузить распакованное» и выберите каталог colada/colada-extension/dist.

Будущие возможности

  • Интерактивный график дерева компонентов для визуализации потока данных между компонентами Vue и дополнительной помощи при отладке.

Колада Ссылки

Гитхаб | "Документация"

Команда Колада