@pinia/root / pinia / mapState

mapState()

Allows using state and getters from one store without using the composition API (setup()) by generating an object to be spread in the computed field of a component.

Param

store to map from

Param

array or object

Call Signature

function mapState<Id, S, G, A, KeyMapper>(useStore, keyMapper): _MapStateObjectReturn<Id, S, G, A, KeyMapper>;

Allows using state and getters from one store without using the composition API (setup()) by generating an object to be spread in the computed field of a component. The values of the object are the state properties/getters while the keys are the names of the resulting computed properties. Optionally, you can also pass a custom function that will receive the store as its first argument. Note that while it has access to the component instance via this, it won't be typed.

Type Parameters

Id

Id extends string

S

S extends StateTree

G

G extends | _GettersTree<S> | { [key: string]: ComputedRef<any>; }

A

A

KeyMapper

KeyMapper extends Record<string, keyof S | keyof G | (store) => any>

Parameters

useStore

StoreDefinition<Id, S, G, A>

store to map from

keyMapper

KeyMapper

object of state properties or getters

Returns

_MapStateObjectReturn<Id, S, G, A, KeyMapper>

Example

export default {
  computed: {
    // other computed properties
    // useCounterStore has a state property named `count` and a getter `double`
    ...mapState(useCounterStore, {
      n: 'count',
      triple: store => store.n * 3,
      // note we can't use an arrow function if we want to use `this`
      custom(store) {
        return this.someComponentValue + store.n
      },
      doubleN: 'double'
    })
  },

  created() {
    this.n // 2
    this.doubleN // 4
  }
}

Call Signature

function mapState<Id, S, G, A, Keys>(useStore, keys): _MapStateReturn<S, G, Keys>;

Allows using state and getters from one store without using the composition API (setup()) by generating an object to be spread in the computed field of a component.

Type Parameters

Id

Id extends string

S

S extends StateTree

G

G extends | _GettersTree<S> | { [key: string]: ComputedRef<any>; }

A

A

Keys

Keys extends string | number | symbol

Parameters

useStore

StoreDefinition<Id, S, G, A>

store to map from

keys

readonly Keys[]

array of state properties or getters

Returns

_MapStateReturn<S, G, Keys>

Example

export default {
  computed: {
    // other computed properties
    ...mapState(useCounterStore, ['count', 'double'])
  },

  created() {
    this.count // 2
    this.double // 4
  }
}