Vue Hooks API

createLocalStorage()

Create a storage module by localStorage.

Type

function createLocalStorage<T>(options: CreateStorageOptions<T>): SoftStorage<T>;

Parameters

• options: CreateStorageOptions<T>

  type CreateStorageOptions<T> = {
    /* Storage module key (must be unique) */
    storageModuleKey: string;
    /* Initial value (non-nullable properties must be initialized, 
      and optional properties cannot be initialized) */
    initial: PickNonNullable<T>;
    /* Whether to enable module protection */
    protect?: boolean;
    /* Version number of the storage module */
    version?: number;
    /* Previous version number of the storage module */
    preVersion?: number;
  };
  

Return Value

The function returns an object (SoftStorage) that includes some required variables for useStorage and useStorageHelper.

Example

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createLocalStorage<UserInfo>({
  storageModuleKey: 'user_info',
  initial: { hasSigned: false },
});

createSessionStorage()

Create a storage module by sessionStorage.

Type

function createSessionStorage<T>(options: CreateStorageOptions<T>): SoftStorage<T>;

Parameters

Same as createLocalStorage() > Parameters

Return Value

Same as createLocalStorage() > Return Value

Example

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createSessionStorage<UserInfo>({
  storageModuleKey: 'user_info',
  initial: { hasSigned: false },
});

useStorage()

Get refs, resetters and checkers from storage module.

Type

function useStorage<T>(storage: SoftStorage<T>): StorageReactions<T>;

Parameters

• storage: SoftStorage<T>

  An object returned by createLocalStorage or createSessionStorage.

Return Value

The function returns an object containing:

• refs: StorageRefs<T>
• resetters: StorageResetters<T>
• checkers: StorageCheckers<T>

type StorageReactions<T> = {
  refs: StorageRefs<T>;
  resetters: StorageResetters<T>;
  checkers: StorageCheckers<T>;
};

Example

import { storage } from './storage';
const {
  refs: { token },
  resetters: { resetToken },
  checkers: { containsToken },
} = useStorage(storage);

useStorageHelper()

Get instance of storage module helper.

Type

function useStorageHelper<T>(storage: SoftStorage<T>): StorageHelper;

Return Value

type StorageHelper = {
  contains: (key: string) => boolean;
  size: () => number;
  initialize: () => void;
};

Example

import { storage } from './storage';
const storageHelper = useStorageHelper(storage);