@gluonjs/store


@gluonjs/store / packages/store/src / StorageLike

Interface: StorageLike

Methods

getItem()

getItem(key): string | null

Parameters

key

string

Returns

string | null


removeItem()?

optional removeItem(key): void

Parameters

key

string

Returns

void


setItem()

setItem(key, value): void

Parameters

key

string

value

string

Returns

void

Example

Adapt browser storage, an in-memory map, or another synchronous key-value owner without coupling Store to a global:

ts
import {
  createPersistencePlugin,
  createStoreManager,
  defineStore,
  type PersistOptions,
  type PersistedStateEnvelope,
  type PersistedStateErrorContext,
  type PersistedStateRecord,
  type PersistedStateRecovery,
  type PersistLegacyMigration,
  type PersistMigrationStep,
  type PersistencePluginOptions,
  type StorageLike,
} from '@gluonjs/store';

type CartState = { items: string[]; open: boolean };
const saved: PersistedStateEnvelope = { version: 0, state: { items: ['lamp'] } };
const values = new Map<string, string>([['goods:cart', JSON.stringify(saved)]]);
const storage: StorageLike = {
  getItem: (key) => values.get(key) ?? null,
  setItem: (key, value) => { values.set(key, value); },
  removeItem: (key) => { values.delete(key); },
};
const migration: PersistMigrationStep = {
  from: 0,
  to: 1,
  migrate: (state) => ({ items: Array.isArray(state.items) ? state.items : [] }),
};
const legacy: PersistLegacyMigration = { to: 1, migrate: migration.migrate };
const migrated: PersistedStateRecord = migration.migrate(saved.state);
const persist = { paths: ['items'], version: 1, migrations: [migration], legacy } satisfies PersistOptions<CartState>;
let recovery: PersistedStateRecovery | undefined;
const options = {
  storage,
  namespace: 'goods',
  onError: (error, storeId, context) => {
    const errorContext: PersistedStateErrorContext | undefined = context;
    recovery = errorContext?.recovery;
    console.error(storeId, error);
  },
} satisfies PersistencePluginOptions;
const manager = createStoreManager({ plugins: [createPersistencePlugin(options)] });
const cart = manager.use(defineStore({
  id: 'cart',
  state: (): CartState => ({ items: [], open: false }),
  persist,
}));
cart.$patch({ items: [...cart.items, 'tray'] });
console.log(migrated, recovery, values.get('goods:cart')); // version 1 envelope
manager.dispose();