Работа с Pinia Stores
Раздел Stores предназначен для просмотра зарегистрированных в приложении Pinia-сторов: имя (идентификатор), число полей state и getters, а после выбора строки — снимок state и getters с возможностью правок и записи обратно в приложение (в поддерживаемых случаях).
Подробнее про редактирование state и getters, а также про избранное по сторам:
Верхняя панель управления
Поиск по сторам
Поле поиска и переключатель Search by работают так же, как и в других вкладках. Типы поиска можно заранее задать в Options для вкладки Stores.
| Режим | Назначение |
|---|---|
| Name | фильтр по имени стора (локально в панели) |
| Key | совпадение по именам полей в state и getters (поиск на стороне страницы) |
| Value | совпадение по значениям в state и getters (также на стороне страницы) |
Для Key и Value действует минимальная длина запроса (по умолчанию 2 символа; настраивается в параметрах поиска инспектора).
Частичное и точное совпадение. Если запрос не обёрнут в кавычки, используется подстрока (без учёта регистра). Точное совпадение включается, если весь запрос обёрнут в двойные кавычки "...".
На стороне поиска по содержимому действует ограничение числа результатов, чтобы не перегружать страницу при широком запросе.
Индикаторы состояния
Справа на панели Stores отображаются:
| Элемент | Назначение |
|---|---|
| N или N/M | Число сторов после фильтра; при непустом поиске через дробь — общее число сторов в последней сводке. |
| Избранное ★ | Совпадения с избранными сторами. Клик открывает Options (раздел избранного Pinia). |
| Обновление | Кнопка Refresh, индикатор загрузки и время последней успешной сводки (или текст вида Loading...). |
Перед запросом сводки панель проверяет доступность канала связи со страницей; если контекст недоступен, данные не запрашиваются.
Рабочая область
Список сторов
Слева отображается таблица сторов. Основные колонки (видимость задаётся в настройках таблицы):
- Name — отображаемое имя стора (baseId);
- State — число ключей в state (если нет — прочерк);
- Getters — число getters (если нет — прочерк).
У строки доступны звезда избранного и контекстное меню. Избранное хранится в настройках инспектора; см. Избранное.
Детализация стора
При выборе строки элемента открывается панель детализации выбранного стора.
Сводная информация
В верхней части панели отображаются:
- имя стора;
- число ключей State;
- число ключей Getters;
- строка Updated: с меткой времени последнего обновления данных карточки.
Данные стора
Ниже доступны вкладки:
| Вкладка | Назначение |
|---|---|
| State | снимок реактивного state; поддерживаются просмотр и сохранение изменений |
| Getters | снимок текущих значений getters в сериализованном виде; поддерживается просмотр и ограниченное редактирование |
Показываются только те вкладки, для которых доступны данные.
Данные активной вкладки отображаются в формате JSON — в текстовом или древовидном виде в зависимости от настроек инспектора.
Навигация
- кнопка ← Назад закрывает детализацию и возвращает к таблице;
- Esc в режиме редактирования отменяет изменения;
- Esc вне режима редактирования выполняет возврат к списку.
Элементы управления
| Элемент | Назначение |
|---|---|
| Star | добавить или убрать стор из избранного |
| Refresh | повторно запросить данные выбранного стора с страницы; доступна вне режима Edit |
| Edit | перейти в режим редактирования активной вкладки (State или Getters) |
Режим редактирования
После включения режима Edit кнопки Refresh и Edit заменяются на Cancel и Save.
| До редактирования | В режиме редактирования |
|---|---|
| Refresh | Cancel — отмена изменений и выход из режима редактирования |
| Edit | Save — применить изменения в приложение |
Изменения попадают в приложение только после подтверждения через Save.
Для State используется обновление текущего состояния стора, для Getters — запись поддерживается только в допустимых сценариях; ограничения зависят от реализации конкретного стора.
Звезда избранного в этой панели и в таблице описана на странице Избранное.
Данные карточки соответствуют снимку на момент последнего запроса: внешние изменения в приложении не отражаются автоматически, пока вы не выполните Refresh в карточке или не обновите сводку на верхней панели вкладки Stores.
Ограничения отображения
Ограничения чтения данных
- Сводка по всем сторам — лёгкий ответ: для каждого стора передаются идентификатор, имя, счётчики ключей state / getters и метка времени снимка, без полной сериализации значений.
- Карточка выбранного стора — отдельный запрос с сериализованными state и getters для отображения и редактирования.
Сериализация state и getters ограничена разумными пределами глубины и размера: циклические структуры, функции и специальные объекты могут быть усечены или представлены иначе, чем в исходном runtime.
Результаты поиска по Key и Value также намеренно ограничены по количеству.
Ограничение объёма хранения
Фиксированного лимита числа сторов в таблице нет: отображаются все сторы, возвращённые сводкой Pinia в типичном сценарии.
Нестандартные регистрации или крайние конфигурации могут отображаться неполно; возможность записи зависит от реализации стора — при ошибке сохранения ориентируйтесь на сообщение интерфейса или консоль.
Принципы работы
Когда начинается сбор данных
Модуль Pinia во внедрённом сценарии подключается после обнаружения Pinia на странице (логика сходна с вкладкой Props: сначала должны быть Vue и активный инспектор).
Если Pinia не установлена или ещё не инициализирована при открытии вкладки Stores, список будет пустым или появится сообщение об ошибке загрузки.
Что попадает в мониторинг
- Сводка — только идентификаторы, имена и счётчики полей для таблицы.
- Детали одного стора — полный сериализованный state и getters по выбору пользователя.
Так отделяется быстрый список от тяжёлого чтения одного стора.
Как устроен обмен
Панель не читает Pinia напрямую: она отправляет сообщение в контекст страницы, где доступен реестр зарегистрированных сторов.
// Иллюстрация: запрос сводки — только id стора, имя и счётчики ключей
const response = await bridge.send({ type: 'PINIA_GET_STORES_SUMMARY' })
// response.summary — объект «storeId → { id, baseId, stateKeys, getterKeys, … }»
const detail = await bridge.send({
type: 'PINIA_GET_STORE_STATE',
storeId: 'my-store-id',
})
// detail.state, detail.getters — данные для отображения и редактированияПоиск по ключам и значениям (PINIA_SEARCH) выполняется на странице и возвращает только список идентификаторов подходящих сторов.