@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

mapState(useStore, keyMapper)

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 extends string

• S extends StateTree

• G extends _GettersTree<S> | object

• A

• 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>

Param

store to map from

Param

array or object

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

mapState(useStore, keys)

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 extends string

• S extends StateTree

• G extends _GettersTree<S> | object

• A

• 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>

Param

store to map from

Param

array or object

Example

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

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