API Documentation / pinia / DefineStoreOptions

Interface: DefineStoreOptions<Id, S, G, A> ​

pinia.DefineStoreOptions

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

See

DefineStoreOptionsBase.

Type parameters ​

Hierarchy ​

• DefineStoreOptionsBase<S, Store<Id, S, G, A>>

  ↳ DefineStoreOptions

Properties ​

actions ​

• Optional actions: A & ThisType<A & UnwrapRef<S> & _StoreWithState<Id, S, G, A> & _StoreWithGetters<G> & PiniaCustomProperties<string, StateTree, _GettersTree<StateTree>, _ActionsTree>>

Optional object of actions.

getters ​

• Optional getters: G & ThisType<UnwrapRef<S> & _StoreWithGetters<G> & PiniaCustomProperties<string, StateTree, _GettersTree<StateTree>, _ActionsTree>> & _GettersTree<S>

Optional object of getters.

id ​

• id: Id

Unique string key to identify the store across the application.

state ​

• Optional state: () => S

Type declaration ​

▸ (): S

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

Returns ​

S

Methods ​

hydrate ​

▸ hydrate(storeState, initialState): void

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)
  }
})

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)
  }
})