Отладка путешествия во времени для 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
- Убедитесь, что установлено расширение Vue.js DevTools.
- Установите Пакет Colada npm в корневой каталог вашего приложения
npm install colada-plugin --save-dev
- Добавьте 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
- Следуйте приведенным выше инструкциям, чтобы добавить
colada-plugin
в ваше приложение Vue. - Перейдите к Colada в Интернет-магазине Chrome и нажмите Добавить в Chrome.
Установить из исходного кода
- Следуйте инструкциям выше, чтобы добавить
colada-plugin
в ваше приложение Vue. - Клонируйте репозиторий colada на свой компьютер.
- Выполните следующие команды
cd colada-extension
npm install
npm run build - Это создаст новый каталог
/dist
в/colada-extension
. - В Chrome перейдите к chrome://extensions
- В правом верхнем углу страницы расширений есть переключатель «Режим разработчика». Убедитесь, что эта функция включена ON.
- В левом верхнем углу страницы выберите «Загрузить распакованное» и выберите каталог
colada/colada-extension/dist
.
Будущие возможности
- Интерактивный график дерева компонентов для визуализации потока данных между компонентами Vue и дополнительной помощи при отладке.
Колада Ссылки
Гитхаб | "Документация"