VueCraft NPM

Списки и ключи ​

useStorageList ​

Composable для CRUD-операций над сохранённым массивом объектов — построен на useStorage, поэтому получает тот же конвейер TTL/миграций/шифрования/сжатия/подписи/синхронизации, просто заточенный под коллекцию, а не одиночное значение.

ts
function useStorageList<T extends object>(
  key: string,
  options?: UseStorageListOptions<T>,
): UseStorageListReturn<T>

Опции ​

Принимает все опции useStorage, кроме defaultValue (список всегда по умолчанию []), плюс:

keyField ​

keyof T & string · по умолчанию: 'id'

Свойство, используемое для идентификации элемента в update()/remove()/find().

Возвращаемое значение ​

items ​

Ref<T[]>

Полный список, реактивный.

isReady ​

Ref<boolean>

false, пока не завершится первичное чтение.

error ​

Ref<StorageError | null>

add ​

(item: T) => void

Добавляет элемент в конец.

update ​

(id: unknown, patch: Partial<T>) => void

Сливает patch с элементом, чей keyField совпадает с id.

remove ​

(id: unknown) => void

Удаляет элемент, чей keyField совпадает с id.

find ​

(id: unknown) => ComputedRef<T | undefined>

Вычисляемый поиск элемента, чей keyField совпадает с id.

findAll ​

(predicate: (item: T) => boolean) => ComputedRef<T[]>

Вычисляемый фильтр по items.

clear ​

() => void

Полностью удаляет базовый ключ хранилища (эквивалент remove() у useStorage).

set ​

(items: T[]) => void

Заменяет весь список целиком.

Пример ​

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

interface Todo {
  id: number
  text: string
  done: boolean
}

const { items: todos, add, update, remove, find } = useStorageList<Todo>('todos')

add({ id: 1, text: 'Write docs', done: false })
update(1, { done: true })

const todo = find(1) // ComputedRef<Todo | undefined>
remove(1)

useStorageKeys ​

Реактивный список ключей, присутствующих в бэкенде хранилища на данный момент, опционально отфильтрованных по префиксу. Автоматически пересканирует при событиях storage из других вкладок.

ts
function useStorageKeys(prefix?: string, target?: StorageTarget): UseStorageKeysReturn

Оба параметра опциональны — prefix по умолчанию '' (все ключи), target по умолчанию 'local'.

Возвращаемое значение ​

keys ​

Ref<string[]>

Ключи, находящиеся сейчас в бэкенде и совпадающие с prefix.

isReady ​

Ref<boolean>

false, пока не завершится первое сканирование.

refresh ​

() => Promise<void>

Немедленно пересканировать — обычно нужно только если вы записали в бэкенд чем-то помимо собственных composables этого пакета (например, сырым вызовом localStorage.setItem, который не вызывает событие storage в той же вкладке).

Пример ​

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

// Все ключи с префиксом "myapp:" в localStorage
const { keys, isReady } = useStorageKeys('myapp:', 'local')