Documentación de la API / pinia

Módulo: pinia ​

Enumeraciones ​

• MutationType

Interfaces ​

• DefineSetupStoreOptions
• DefineStoreOptions
• DefineStoreOptionsBase
• DefineStoreOptionsInPlugin
• MapStoresCustomization
• Pinia
• PiniaCustomProperties
• PiniaCustomStateProperties
• PiniaPlugin
• PiniaPluginContext
• StoreDefinition
• StoreProperties
• SubscriptionCallbackMutationDirect
• SubscriptionCallbackMutationPatchFunction
• SubscriptionCallbackMutationPatchObject
• _StoreOnActionListenerContext
• _StoreWithState
• _SubscriptionCallbackMutationBase

Tipado de los Alias ​

PiniaStorePlugin ​

Ƭ PiniaStorePlugin: PiniaPlugin

Plugin para extender cualquier almacén.

Deprecado

usa PiniaPlugin en su lugar

StateTree ​

Ƭ StateTree: Record<string | number | symbol, any>

Estado genérico de un almacén.

Store ​

Ƭ Store<Id, S, G, A>: _StoreWithState<Id, S, G, A> & UnwrapRef<S> & _StoreWithGetters<G> & _ActionsTree extiende A ? {} : A & PiniaCustomProperties<Id, S, G, A> & PiniaCustomStateProperties<S>

Tipo Store para crear almacenes.

Tipado de los parámetros ​

StoreActions ​

Ƭ StoreActions<SS>: SS extiende Store<string, StateTree, _GettersTree<StateTree>, infiere A> ? A : _ExtractActionsFromSetupStore<SS>

Extrae las acciones de un tipo Store. Funciona con almacenes de configuración o almacenes de opciones.

Tipado de los parámetros ​

StoreGeneric ​

Ƭ StoreGeneric: Store<string, StateTree, _GettersTree<StateTree>, _ActionsTree>

Versión genérica y con tipado inseguro de Store. No falla al acceder con strings, haciendo mucho más fácil escribir funciones genéricas a las que no les importa el tipo de almacén pasado.

StoreGetters ​

Ƭ StoreGetters<SS>: SS extiende Store<string, StateTree, infiere G, _ActionsTree> ? _StoreWithGetters<G> : _ExtractGettersFromSetupStore<SS>

Extrae los getters de un tipo Store. Funciona con almacenes de configuración o almacenes de opciones.

Tipado de los parámetros ​

StoreOnActionListener ​

Ƭ StoreOnActionListener<Id, S, G, A>: (context: StoreOnActionListenerContext<Id, S, G, {} extiende A ? _ActionsTree : A>) => void

Tipado de los parámetros ​

Tipado de la declaración ​

▸ (context): void

Argumentos de store.$onAction()

Parámetros ​

Retorna ​

void

StoreOnActionListenerContext ​

Ƭ StoreOnActionListenerContext<Id, S, G, A>: _ActionsTree extiende A ? _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree> : { [Name en keyof A]: Name extiende string ? _StoreOnActionListenerContext<Store<Id, S, G, A>, Name, A> : never }[keyof A]

Objeto de contexto pasado a las callbacks de store.$onAction(context => {}) POR HACER: debería tener solo el Id, el almacén y las acciones para generar el objeto correcto.

Tipado de los parámetros ​

StoreState ​

Ƭ StoreState<SS>: SS extiende Store<string, infiere S, _GettersTree<StateTree>, _ActionsTree> ? UnwrapRef<S> : _ExtractStateFromSetupStore<SS>

Extrae el estado de un tipo Store. Funciona con almacenes de configuración o almacenes de opciones. Cabe aclarar que desenvuelve las refs.

Tipado de los parámetros ​

SubscriptionCallback ​

Ƭ SubscriptionCallback<S>: (mutation: SubscriptionCallbackMutation<S>, state: UnwrapRef<S>) => void

Tipado de los parámetros ​

Tipado de la declaración ​

▸ (mutation, state): void

Callback de una suscripción

Parámetros ​

Retorna ​

void

SubscriptionCallbackMutation ​

Ƭ SubscriptionCallbackMutation<S>: SubscriptionCallbackMutationDirect | SubscriptionCallbackMutationPatchObject<S> | SubscriptionCallbackMutationPatchFunction

Objeto de contexto pasado a una callback de una suscripción.

Tipado de los parámetros ​

_ActionsTree ​

Ƭ _ActionsTree: Record<string, _Method>

Tipo de un objeto de acciones. Solo para uso interno.

_Awaited ​

Ƭ _Awaited<T>: T extiende null | undefined ? T : T extiende object & { then: (onfulfilled: F) => any } ? F extiende (value: infiere V, ...args: any) => any ? _Awaited<V> : never : T

Tipado de los parámetros ​

_DeepPartial ​

Ƭ _DeepPartial<T>: { [K en keyof T]?: _DeepPartial<T[K]> }

Partial<T> recursivo. Usado por ['$patch'].

Solo para uso interno

Tipado de los parámetros ​

_ExtractActionsFromSetupStore ​

Ƭ _ExtractActionsFromSetupStore<SS>: SS extiende undefined | void ? {} : _ExtractActionsFromSetupStore_Keys<SS> extiende keyof SS ? Pick<SS, _ExtractActionsFromSetupStore_Keys<SS>> : never

Solo para uso interno

Tipado de los parámetros ​

_ExtractActionsFromSetupStore_Keys ​

Ƭ _ExtractActionsFromSetupStore_Keys<SS>: keyof { [K en keyof SS como SS[K] extiende _Method ? K : never]: any }

Tipo que permite refactorizar a través del IDE. Solo para uso interno

Tipado de los parámetros ​

_ExtractGettersFromSetupStore ​

Ƭ _ExtractGettersFromSetupStore<SS>: SS extiende undefined | void ? {} : _ExtractGettersFromSetupStore_Keys<SS> extiende keyof SS ? Pick<SS, _ExtractGettersFromSetupStore_Keys<SS>> : never

Solo para uso interno

Tipado de los parámetros ​

_ExtractGettersFromSetupStore_Keys ​

Ƭ _ExtractGettersFromSetupStore_Keys<SS>: keyof { [K en keyof SS como SS[K] extiende ComputedRef ? K : never]: any }

Tipo que permite refactorizar a través del IDE. Solo para uso interno

Tipado de los parámetros ​

_ExtractStateFromSetupStore ​

Ƭ _ExtractStateFromSetupStore<SS>: SS extiende undefined | void ? {} : _ExtractStateFromSetupStore_Keys<SS> extiende keyof SS ? _UnwrapAll<Pick<SS, _ExtractStateFromSetupStore_Keys<SS>>> : never

Solo para uso interno

Tipado de los parámetros ​

_ExtractStateFromSetupStore_Keys ​

Ƭ _ExtractStateFromSetupStore_Keys<SS>: keyof { [K en keyof SS como SS[K] extiende _Method | ComputedRef ? never : K]: any }

Tipo que permite refactorizar a través del IDE. Solo para uso interno

Tipado de los parámetros ​

_GettersTree ​

Ƭ _GettersTree<S>: Record<string, (state: UnwrapRef<S> & UnwrapRef<PiniaCustomStateProperties<S>>) => any | () => any>

Tipo de un objeto de Getters que infiere el argumento. Solo para uso interno

Tipado de los parámetros ​

_MapActionsObjectReturn ​

Ƭ _MapActionsObjectReturn<A, T>: { [key en keyof T]: A[T[key]] }

Solo para uso interno

Tipado de los parámetros ​

_MapActionsReturn ​

Ƭ _MapActionsReturn<A>: { [key en keyof A]: A[key] }

Solo para uso interno

Tipado de los parámetros ​

_MapStateObjectReturn ​

Ƭ _MapStateObjectReturn<Id, S, G, A, T>: { [key en keyof T]: Function }

Solo para uso interno

Tipado de los parámetros ​

_MapStateReturn ​

Ƭ _MapStateReturn<S, G, Keys>: { [key en Keys]: Function }

Solo para uso interno

Tipado de los parámetros ​

_MapWritableStateObjectReturn ​

Ƭ _MapWritableStateObjectReturn<S, T>: { [key en keyof T]: Object }

Solo para uso interno

Tipado de los parámetros ​

_MapWritableStateReturn ​

Ƭ _MapWritableStateReturn<S>: { [key en keyof S]: Object }

Solo para uso interno

Tipado de los parámetros ​

_Method ​

Ƭ _Method: (...args: any[]) => any

Tipado de la declaración ​

▸ (...args): any

Tipo genérico para una función que infiere argumentos y retorna el tipo. Solo para uso interno

Parámetros ​

Retorna ​

any

_Spread ​

Ƭ _Spread<A>: A extiende [infiere L, ...(infiere R)] ? _StoreObject<L> & _Spread<R> : unknown

Solo para uso interno.

Tipado de los parámetros ​

_StoreObject ​

Ƭ _StoreObject<S>: S extiende StoreDefinition<infiere Ids, infiere State, infiere Getters, infiere Actions> ? { [Id en `${Ids}${MapStoresCustomization extiende Record<"suffix", infiere Suffix extiende string> ? Suffix : "Store"}`]: Function } : {}

Solo para uso interno.

Tipado de los parámetros ​

_StoreWithActions ​

Ƭ _StoreWithActions<A>: { [k en keyof A]: A[k] extiende Function ? Function : never }

Almacén aumentado para acciones. Solo para uso interno

Tipado de los parámetros ​

_StoreWithGetters ​

Ƭ _StoreWithGetters<G>: { readonly [k en keyof G]: G[k] extiende Function ? R : UnwrapRef<G[k]> }

Almacén aumentado con getters. Solo para uso interno

Tipado de los parámetros ​

_UnwrapAll ​

Ƭ _UnwrapAll<SS>: { [K en keyof SS]: UnwrapRef<SS[K]> }

Tipo que permite refactorizar a través del IDE. Solo para uso interno

Tipado de los parámetros ​

Variables ​

PiniaVuePlugin ​

• Const PiniaVuePlugin: Plugin

Plugin de Vue 2 que tiene que ser instalado para que pinia funcione. Cabe aclarar que no necesitas usar este plugin si estás usando Nuxt.js. Usa buildModule en su lugar: https://es-pinia.vercel.app/ssr/nuxt.html.

Ejemplo

import Vue from 'vue'
import { PiniaVuePlugin, createPinia } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // ...
  pinia,
})

import Vue from 'vue'
import { PiniaVuePlugin, createPinia } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // ...
  pinia,
})

Parámetro

Vue importado desde 'vue'.

Funciones ​

acceptHMRUpdate ​

▸ acceptHMRUpdate<Id, S, G, A>(initialUseStore, hot): (newModule: any) => any

Crea una función accept para pasar a import.meta.hot en aplicaciones de Vite.

Ejemplo

const useUser = defineStore(...)
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot))
}

const useUser = defineStore(...)
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot))
}

Tipado de los parámetros ​

Parámetros ​

Retorna ​

fn

▸ (newModule): any

Parámetros ​

Retorna ​

any

createPinia ​

▸ createPinia(): Pinia

Crea una instancia de Pinia para ser usada por la aplicación

Retorna ​

Pinia

defineStore ​

▸ defineStore<Id, S, G, A>(id, options): StoreDefinition<Id, S, G, A>

Crea una función useStore que recupera la instancia del almacén

Tipado de los parámetros ​

Parámetros ​

Retorna ​

StoreDefinition<Id, S, G, A>

▸ defineStore<Id, S, G, A>(options): StoreDefinition<Id, S, G, A>

Crea una función useStore que recupera la instancia del almacén

Tipado de los parámetros ​

Parámetros ​

Retorna ​

StoreDefinition<Id, S, G, A>

▸ defineStore<Id, SS>(id, storeSetup, options?): StoreDefinition<Id, _ExtractStateFromSetupStore<SS>, _ExtractGettersFromSetupStore<SS>, _ExtractActionsFromSetupStore<SS>>

Crea una función useStore que recupera la instancia del almacén

Tipado de los parámetros ​

Parámetros ​

Retorna ​

StoreDefinition<Id, _ExtractStateFromSetupStore<SS>, _ExtractGettersFromSetupStore<SS>, _ExtractActionsFromSetupStore<SS>>

getActivePinia ​

▸ getActivePinia(): undefined | Pinia

Obtén la pinia que está actualmente activa si hay alguna.

Retorna ​

undefined | Pinia

mapActions ​

▸ mapActions<Id, S, G, A, KeyMapper>(useStore, keyMapper): _MapActionsObjectReturn<A, KeyMapper>

Permite usar directamente acciones de tu almacén sin usar la API de composición (setup()) generando un objeto que será extendido en el campo methods de un componente. El valor del objeto son las acciones mientras que las claves son los nombre de los métodos resultantes.

Ejemplo

export default {
  methods: {
    // otras métodos
    // useCounterStore tiene dos acciones llamadas `increment` y `setCount` 
    ...mapActions(useCounterStore, { moar: 'increment', setIt: 'setCount' })
  },

  created() {
    this.moar()
    this.setIt(2)
  }
}

export default {
  methods: {
    // otras métodos
    // useCounterStore tiene dos acciones llamadas `increment` y `setCount` 
    ...mapActions(useCounterStore, { moar: 'increment', setIt: 'setCount' })
  },

  created() {
    this.moar()
    this.setIt(2)
  }
}

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_MapActionsObjectReturn<A, KeyMapper>

▸ mapActions<Id, S, G, A>(useStore, keys): _MapActionsReturn<A>

Permite usar directamente acciones de tu almacén sin usar la API de composición (setup()) generando un objeto que será extendido en el campo methods de un componente.

Example

export default {
  methods: {
    // otros métodos
    ...mapActions(useCounterStore, ['increment', 'setCount'])
  },

  created() {
    this.increment()
    this.setCount(2) // pasa el argumento como siempre
  }
}

export default {
  methods: {
    // otros métodos
    ...mapActions(useCounterStore, ['increment', 'setCount'])
  },

  created() {
    this.increment()
    this.setCount(2) // pasa el argumento como siempre
  }
}

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_MapActionsReturn<A>

mapGetters ​

▸ mapGetters<Id, S, G, A, KeyMapper>(useStore, keyMapper): _MapStateObjectReturn<Id, S, G, A, KeyMapper>

Alias para mapState(). Deberías usar mapState() en su lugar.

Deprecado

usa mapState() en su lugar.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

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

▸ mapGetters<Id, S, G, A, Keys>(useStore, keys): _MapStateReturn<S, G, Keys>

Alias para mapState(). Deberías usar mapState() en su lugar.

Deprecado

usa mapState() en su lugar.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_MapStateReturn<S, G, Keys>

mapState ​

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

Permite usar el estado y los getters de un almacén sin usar la API de composición (setup()) generando un objeto que será extendido en el campo computed de un componente. Los valores del objeto son las propiedades del estado/getters mientras que las claves son los nombres de las propiedades computadas resultantes. Opcionalmente, puedes también pasar una función personalizada que recibirá el almacén como primer argumento. Cabe aclarar que mientras tenga acceso al componente mediante this, este no será tipado.

Ejemplo

export default {
  computed: {
    // otras propiedades computadas
    // useCounterStore tiene una propiedad del estado llamada `count` 
    // y un getter `double`
    ...mapState(useCounterStore, {
      n: 'count',
      triple: store => store.n * 3,
      // cabe aclarar que no podemos usar funciones de flecha si
      // queremos usar `this`
      custom(store) {
        return this.someComponentValue + store.n
      },
      doubleN: 'double'
    })
  },

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

export default {
  computed: {
    // otras propiedades computadas
    // useCounterStore tiene una propiedad del estado llamada `count` 
    // y un getter `double`
    ...mapState(useCounterStore, {
      n: 'count',
      triple: store => store.n * 3,
      // cabe aclarar que no podemos usar funciones de flecha si
      // queremos usar `this`
      custom(store) {
        return this.someComponentValue + store.n
      },
      doubleN: 'double'
    })
  },

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

Tipado de los parámetros ​

Parámetros ​

Retorna ​

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

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

Permite usar el estado y los getters de un almacén sin usar la API de composición (setup()) generando un objeto que será extendido en el campo computed de un componente.

Ejemplo

export default {
  computed: {
    // otras propiedades computadas
    ...mapState(useCounterStore, ['count', 'double'])
  },

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

export default {
  computed: {
    // otras propiedades computadas
    ...mapState(useCounterStore, ['count', 'double'])
  },

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

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_MapStateReturn<S, G, Keys>

mapStores ​

▸ mapStores<Stores>(...stores): _Spread<Stores>

Permite usar almacenes sin la API de composición (setup()) generando un objeto que será extendido en el campo computed de un componente. Acepta una lista de definiciones de almacenes.

Ejemplo

export default {
  computed: {
    // otras propiedades computadas
    ...mapStores(useUserStore, useCartStore)
  },

  created() {
    this.userStore // almacén con id "user"
    this.cartStore // almacén con id "cart"
  }
}

export default {
  computed: {
    // otras propiedades computadas
    ...mapStores(useUserStore, useCartStore)
  },

  created() {
    this.userStore // almacén con id "user"
    this.cartStore // almacén con id "cart"
  }
}

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_Spread<Stores>

mapWritableState ​

▸ mapWritableState<Id, S, G, A, KeyMapper>(useStore, keyMapper): _MapWritableStateObjectReturn<S, KeyMapper>

Igual que mapState() pero también crea setters computados para que el estado pueda ser modificado. Al contrario que mapState(), solo se pueden añadir propiedades estado. added.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

_MapWritableStateObjectReturn<S, KeyMapper>

▸ mapWritableState<Id, S, G, A, Keys>(useStore, keys): { [K in Keys]: Object }

Permite usar el estado y los getters de un almacén sin usar la API de composición (setup()) generando un objeto que será extendido en el campo computed de un componente.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

{ [K in Keys]: Object }

setActivePinia ​

▸ setActivePinia(pinia): Pinia

Establece o desactiva la pinia activa. Usado en SSR e internamente cuando se llaman a acciones y getters.

Parámetros ​

Retorna ​

Pinia

▸ setActivePinia(pinia): undefined

Establece o desactiva la pinia activa. Usado en SSR e internamente cuando se llaman a acciones y getters.

Parámetros ​

Retorna ​

undefined

▸ setActivePinia(pinia): undefined | Pinia

Establece o desactiva la pinia activa. Usado en SSR e internamente cuando se llaman a acciones y getters.

Parámetros ​

Retorna ​

undefined | Pinia

setMapStoreSuffix ​

▸ setMapStoreSuffix(suffix): void

Cambia es sufijo añadido por mapStores(). Puede ser establecido a un string vacío. Por defecto es "Store". Asegúrate de extender la interfaz MapStoresCustomization si estás usando TypeScript.

Parámetros ​

Retorna ​

void

skipHydrate ​

▸ skipHydrate<T>(obj): T

Le dice a Pinia que se salte el proceso de hidratación de un objeto dado. Esto es útil en almacenes de configuración (solo) cuando retornes un objet de estados en el almacén pero este no es realmente estado. Por ejemplo, retornar una instancia del router en un almacén de configuración.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

T

obj

storeToRefs ​

▸ storeToRefs<SS>(store): ToRefs<StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>>

Crea un objeto de referencias con todo el estado, getters y propiedades de estado añadidas por un plugin del almacén. Parecido a toRefs() pero diseñado específicamente para los almacenes de Pinia, por lo que los métodos y propiedades no reactivas son ignorados completamente.

Tipado de los parámetros ​

Parámetros ​

Retorna ​

ToRefs<StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>>