Devtools

Кастомный инспектор Vue Devtools и таймлайн, построенный на общем кэше движка — так что показывает каждый живой экземпляр useStorage() независимо от того, был ли он создан из Vue или из хука React.

• Инспектор: ключ, цель, текущее значение, isReady, expiry, canUndo/canRedo и состояние ошибки — обновляется примерно раз в секунду, так что изменения, вызванные синхронизацией между вкладками или TTL, появляются без ручного обновления.
• Таймлайн: логирует события write, expire, migrate, sync-received и error по мере их возникновения, так что вы видите когда и почему изменилось значение, а не только его текущий снапшот.

Опционально: вызовите setupDevtools(app) из точки входа /devtools один раз, там, где вы создаёте приложение.

import { createApp } from 'vue'
import { setupDevtools } from 'vue-storage-kit/devtools'
import App from './App.vue'

const app = createApp(App)
setupDevtools(app)
app.mount('#app')

Безопасно вызывать безусловно — setupDevtools (и @vue/devtools-api, который он оборачивает) ничего не делает, когда клиент devtools не подключён, так что вызов в продакшене не имеет эффекта, кроме (крошечного) добавленного кода. Если хотите полностью убрать это из продакшен-бандлов, оберните вызов и импорт своей проверкой dev-режима:

if (import.meta.env.DEV) {
  const { setupDevtools } = await import('vue-storage-kit/devtools')
  setupDevtools(app)
}