VueCraft NPM

Бэкенды хранилища ​

useIndexedDB ​

Promise-based доступ ключ-значение к object store IndexedDB. Store создаётся автоматически, если не существует.

ts
function useIndexedDB<T>(
  dbName: string,
  storeName: string,
  onError?: (err: StorageError) => void,
  options?: UseIndexedDBOptions,
): UseIndexedDBReturn<T>

Опции ​

indexes ​

IDBIndexDefinition[]

Вторичные индексы, создаваемые на store, каждый вида { name, keyPath, unique?, multiEntry? } — создаются один раз, при первом открытии store (изменения схемы требуют увеличения version).

version ​

number · по умолчанию: 1

Версия базы данных IndexedDB. Увеличивайте её при каждом изменении indexes — IndexedDB перезапускает upgrade (и, соответственно, применяет новые/изменённые индексы) только когда запрошенная версия выше сохранённой.

Методы ​

get ​

(key: IDBValidKey) => Promise<T | null>

Прочитать значение по ключу.

set ​

(key: IDBValidKey, value: T) => Promise<void>

Записать значение.

delete ​

(key: IDBValidKey) => Promise<void>

Удалить ключ.

keys ​

() => Promise<IDBValidKey[]>

Все ключи в store.

getAll ​

() => Promise<T[]>

Все значения.

clear ​

() => Promise<void>

Удалить всё содержимое store.

count ​

() => Promise<number>

Количество записей.

transaction ​

<R>(fn: (store: IDBObjectStore) => IDBRequest<R>) => Promise<R>

Сырая IDB-транзакция для всего, что не покрывает обёртка выше.

getByIndex ​

(indexName: string, value: IDBValidKey) => Promise<T | null>

Прочитать первое значение, чей вторичный индекс (объявленный через опцию indexes) совпадает с value.

getAllByIndex ​

(indexName: string, value: IDBValidKey) => Promise<T[]>

Прочитать все значения, чей вторичный индекс совпадает с value.

Пример ​

ts
import { useIndexedDB } from 'vue-storage-kit'

interface Person {
  id: number
  email: string
  data: ArrayBuffer
}

const idb = useIndexedDB<Person>('my-db', 'people', (err) => console.error(err), {
  indexes: [{ name: 'by-email', keyPath: 'email', unique: true }],
  version: 1,
})

await idb.set(1, { id: 1, email: 'ada@example.com', data: buffer })
const person = await idb.get(1)
console.log(await idb.count())

// Запрос по вторичному индексу вместо первичного ключа
const byEmail = await idb.getByIndex('by-email', 'ada@example.com')

// Сырая транзакция
await idb.transaction((store) => store.put({ id: 2, email: 'b@example.com', data: buffer2 }, 2))

await idb.delete(1)
await idb.clear()

useIDBRef ​

Реактивный Ref, который читает и пишет одиночный ключ IndexedDB. Полезен, когда нужен тот же реактивный API, что и у useStorage, но на базе IndexedDB.

ts
useIDBRef<T>(
  dbName: string,
  storeName: string,
  key: IDBValidKey,
  defaultValue: T,
): { value: Ref<T>; isReady: Ref<boolean>; error: Ref<StorageError | null> }
ts
import { useIDBRef } from 'vue-storage-kit'

const { value: draft, isReady } = useIDBRef('editor-db', 'drafts', 'post-42', '')

// Как только isReady.value === true, draft отражает сохранённое значение
draft.value = 'Hello, world!' // автоматически пишется обратно в IDB

useCookie ​

Реактивный Ref на базе document.cookie. Присваивание рефу устанавливает cookie. По умолчанию включена JSON-сериализация с поддержкой Date, Map, Set.

Импортированный напрямую из vue-storage-kit, он клиентский (чтения при SSR возвращают defaultValue, поскольку на сервере нет document). Внутри Nuxt-приложения с подключённым модулем vue-storage-kit/nuxt автоимпортированные вызовы useCookie разрешаются вместо этого в SSR-совместимую версию — та же сигнатура, но на базе запроса/ответа H3 на сервере. См. Модуль Nuxt.

ts
useCookie<T>(name: string, options: CookieOptions<T>): Ref<T>

Опции ​

defaultValue ​

T

Значение, возвращаемое, когда cookie отсутствует.

expires ​

Date | number

Срок действия как Date или число дней.

path ​

string · по умолчанию: '/'

Путь cookie.

domain ​

string

Домен cookie.

secure ​

boolean

Добавить флаг Secure.

sameSite ​

'strict' | 'lax' | 'none'

Атрибут SameSite.

httpOnly ​

boolean

Только для SSR — передаётся в H3 setCookie; игнорируется браузерами, поскольку document.cookie в принципе не позволяет установить этот флаг из клиентского JS. При указании на этом базовом, клиентском useCookie (то есть вне SSR-контекста Nuxt) теперь выводится console.warn в dev-режиме вместо тихого игнорирования — по-настоящему учесть флаг может только SSR-совместимая замена useCookie из модуля Nuxt.

serializer ​

Serializer<T> · по умолчанию: JSON

Кастомный сериализатор.

Примеры ​

Сессионная cookie (истекает при закрытии браузера):

ts
const consent = useCookie('cookie-consent', { defaultValue: false })
consent.value = true

Постоянная cookie — 30 дней:

ts
const locale = useCookie('locale', {
  defaultValue: 'en',
  expires: 30,
  sameSite: 'lax',
})

Nuxt SSR — один и тот же API работает на сервере и клиенте:

vue
<script setup lang="ts">
// При подключённом модуле vue-storage-kit/nuxt этот автоимпорт разрешается
// в SSR-совместимый useCookie — читает/пишет через H3 на сервере.
const token = useCookie('auth-token', {
  defaultValue: '',
  secure: true,
  httpOnly: true, // учитывается на сервере через H3 setCookie
  sameSite: 'strict',
})
</script>