API reference › @evolu/vue › useStore

function useStore<T>(store: ReadonlyStore<T>): Readonly<Ref<T>>;

Defined in: useStore.ts:35

Vue composable returning the value of an Evolu ReadonlyStore, such as evoluError or syncState of the deps, in a ref that follows the store until the current effect scope, such as the component, is disposed. It's what React's useSyncExternalStore does for a store. A store replaces its value rather than mutating it, so the ref changes only when the value does. During server rendering, it reads the store once.

Example

import { assertType, type ReadonlyStore, type SyncState } from "@evolu/common";
import { useStore } from "@evolu/vue";
import type { Ref } from "vue";

// Call composables in component setup.
const useSyncState = (syncState: ReadonlyStore<SyncState | null>) =>
  useStore(syncState);

assertType<ReturnType<typeof useSyncState>, Readonly<Ref<SyncState | null>>>();