API Documentation / pinia / _StoreWithState

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

pinia._StoreWithState

Base store with state and functions. Should not be used directly.

Type parameters ​

Hierarchy ​

• StoreProperties<Id>

  ↳ _StoreWithState

Properties ​

$id ​

• $id: Id

Unique identifier of the store

Inherited from ​

StoreProperties.$id

$state ​

• $state: UnwrapRef<S> & PiniaCustomStateProperties<S>

State of the Store. Setting it will internally call $patch() to update the state.

_customProperties ​

• _customProperties: Set<string>

Used by devtools plugin to retrieve properties added with plugins. Removed in production. Can be used by the user to add property keys of the store that should be displayed in devtools.

Inherited from ​

StoreProperties._customProperties

Methods ​

$dispose ​

▸ $dispose(): void

Stops the associated effect scope of the store and remove it from the store registry. Plugins can override this method to cleanup any added effects. e.g. devtools plugin stops displaying disposed stores from devtools. Note this doesn't delete the state of the store, you have to do it manually with delete pinia.state.value[store.$id] if you want to. If you don't and the store is used again, it will reuse the previous state.

Returns ​

void

$onAction ​

▸ $onAction(callback, detached?): () => void

Setups a callback to be called every time an action is about to get invoked. The callback receives an object with all the relevant information of the invoked action:

• store: the store it is invoked on
• name: The name of the action
• args: The parameters passed to the action

On top of these, it receives two functions that allow setting up a callback once the action finishes or when it fails.

It also returns a function to remove the callback. Note than when calling store.$onAction() inside of a component, it will be automatically cleaned up when the component gets unmounted unless detached is set to true.

Parameters ​

Returns ​

fn

function that removes the watcher

▸ (): void

Setups a callback to be called every time an action is about to get invoked. The callback receives an object with all the relevant information of the invoked action:

• store: the store it is invoked on
• name: The name of the action
• args: The parameters passed to the action

On top of these, it receives two functions that allow setting up a callback once the action finishes or when it fails.

It also returns a function to remove the callback. Note than when calling store.$onAction() inside of a component, it will be automatically cleaned up when the component gets unmounted unless detached is set to true.

Returns ​

void

function that removes the watcher

Example

store.$onAction(({ after, onError }) => {
 // Here you could share variables between all of the hooks as well as
 // setting up watchers and clean them up
 after((resolvedValue) => {
   // can be used to cleanup side effects
.  // `resolvedValue` is the value returned by the action, if it's a
.  // Promise, it will be the resolved value instead of the Promise
 })
 onError((error) => {
   // can be used to pass up errors
 })
})

store.$onAction(({ after, onError }) => {
 // Here you could share variables between all of the hooks as well as
 // setting up watchers and clean them up
 after((resolvedValue) => {
   // can be used to cleanup side effects
.  // `resolvedValue` is the value returned by the action, if it's a
.  // Promise, it will be the resolved value instead of the Promise
 })
 onError((error) => {
   // can be used to pass up errors
 })
})

Example

store.$onAction(({ after, onError }) => {
 // Here you could share variables between all of the hooks as well as
 // setting up watchers and clean them up
 after((resolvedValue) => {
   // can be used to cleanup side effects
.  // `resolvedValue` is the value returned by the action, if it's a
.  // Promise, it will be the resolved value instead of the Promise
 })
 onError((error) => {
   // can be used to pass up errors
 })
})

store.$onAction(({ after, onError }) => {
 // Here you could share variables between all of the hooks as well as
 // setting up watchers and clean them up
 after((resolvedValue) => {
   // can be used to cleanup side effects
.  // `resolvedValue` is the value returned by the action, if it's a
.  // Promise, it will be the resolved value instead of the Promise
 })
 onError((error) => {
   // can be used to pass up errors
 })
})

$patch ​

▸ $patch(partialState): void

Applies a state patch to current state. Allows passing nested values

Parameters ​

Returns ​

void

▸ $patch<F>(stateMutator): void

Group multiple changes into one function. Useful when mutating objects like Sets or arrays and applying an object patch isn't practical, e.g. appending to an array. The function passed to $patch() must be synchronous.

Type parameters ​

Parameters ​

Returns ​

void

$reset ​

▸ $reset(): void

Resets the store to its initial state by building a new state object. TODO: make this options only

Returns ​

void

$subscribe ​

▸ $subscribe(callback, options?): () => void

Setups a callback to be called whenever the state changes. It also returns a function to remove the callback. Note that when calling store.$subscribe() inside of a component, it will be automatically cleaned up when the component gets unmounted unless detached is set to true.

Parameters ​

Returns ​

fn

function that removes the watcher

▸ (): void

Setups a callback to be called whenever the state changes. It also returns a function to remove the callback. Note that when calling store.$subscribe() inside of a component, it will be automatically cleaned up when the component gets unmounted unless detached is set to true.

Returns ​

void

function that removes the watcher