Interface DefineStoreOptions<Id, S, G, A>

Options parameter of defineStore() for option stores. Can be extended to augment stores with the plugin API.

interface DefineStoreOptions<Id, S, G, A> {
    actions?: A & ThisType<A & UnwrapRef<S> & _StoreWithState<Id, S, G, A> & _StoreWithGetters<G> & PiniaCustomProperties<string, StateTree, _GettersTree<StateTree>, _ActionsTree>>;
    getters?: G & ThisType<UnwrapRef<S> & _StoreWithGetters<G> & PiniaCustomProperties<string, StateTree, _GettersTree<StateTree>, _ActionsTree>> & _GettersTree<S>;
    id: Id;
    state?: (() => S);
    hydrate?(storeState, initialState): void;
}

Type Parameters

Hierarchy (view full)

Properties

Methods

Properties

Optional object of actions.

Optional object of getters.

id: Id

Unique string key to identify the store across the application.

state?: (() => S)

Function to create a fresh state. Must be an arrow function to ensure correct typings!

Type declaration

    • (): S
    • Function to create a fresh state. Must be an arrow function to ensure correct typings!

      Returns S

Methods

  • Allows hydrating the store during SSR when complex state (like client side only refs) are used in the store definition and copying the value from pinia.state isn't enough.

    Parameters

    Returns void

    Example

    If in your state, you use any customRefs, any computeds, or any refs that have a different value on Server and Client, you need to manually hydrate them. e.g., a custom ref that is stored in the local storage:

    const useStore = defineStore('main', {
    state: () => ({
    n: useLocalStorage('key', 0)
    }),
    hydrate(storeState, initialState) {
    // @ts-expect-error: https://github.com/microsoft/TypeScript/issues/43826
    storeState.n = useLocalStorage('key', 0)
    }
    })

Generated using TypeDoc