Skip to content

@pinia/root / pinia / mapGetters

mapGetters()

ts
const mapGetters: {
<Id, S, G, A, KeyMapper>  (useStore, keyMapper): _MapStateObjectReturn<Id, S, G, A, KeyMapper>;
<Id, S, G, A, Keys>  (useStore, keys): _MapStateReturn<S, G, Keys>;
} = mapState;

Alias for mapState(). You should use mapState() instead.

Call Signature

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

js
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

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

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

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

Deprecated

use mapState() instead.

Released under the MIT License.