Uso sem setup

A Pinia pode ser usada mesmo se não estivermos usando a API de composição (se estivermos usando a Vue <2.7, ainda precisamos instalar a extensão @vue/composition-api). Embora recomendemos que os programadores experimentem e aprendam a API de composição, pode não ser ainda a altura certa para alguns e para a sua equipa, alguns podem estar no processo de migração duma aplicação, ou qualquer outro motivo. Existem algumas funções:

• mapStores
• mapState
• mapWritableState
• ⚠️ mapGetters (apenas por conveniência de migração, recomendamos usar a mapState())
• mapActions

Dar Acesso a Toda a Memória

Se precisarmos de aceder a praticamente tudo a partir da memória, poderá ser demasiado complicado mapear todas as propriedades da memória... Em vez disso, podemos obter acesso a toda a memória com mapStores():

import { mapStores } from 'pinia'

// dadas duas memórias com os seguintes identificadores
const useUserStore = defineStore('user', {
  // ...
})
const useCartStore = defineStore('cart', {
  // ...
})

export default {
  computed: {
    // nota que não passamos um vetor, apenas uma memória após outra
    // cada memória será acessível como o seu identificador + 'Store'
    ...mapStores(useCartStore, useUserStore)
  },

  methods: {
    async buyStuff() {
      // usá-las em qualquer lugar!
      if (this.userStore.isAuthenticated()) {
        await this.cartStore.buy()
        this.$router.push('/purchased')
      }
    },
  },
}

Por padrão, a Pinia adicionará o sufixo "Store" ao id de cada memória. Podemos personalizar este comportamento chamando a função setMapStoreSuffix():

import { createPinia, setMapStoreSuffix } from 'pinia'

// remover completamente o sufixo: `this.user`, `this.cart`
setMapStoreSuffix('')
// `this.user_store`, `this.cart_store`
// (está tudo bem, não julgaremos ninguém)
setMapStoreSuffix('_store')
export const pinia = createPinia()

TypeScript

Por padrão, todos os auxiliares de mapas suportam o conclusão automática da escrita de código e não precisamos de fazer nada. Se chamarmos setMapStoreSuffix() para alterar o sufixo "Store", precisaremos também adicioná-lo em algum lugar num ficheiro de TypeScript ou no nosso ficheiro global.d.ts. O local mais conveniente seria o mesmo local onde chamamos setMapStoreSuffix():

import { createPinia, setMapStoreSuffix } from 'pinia'

setMapStoreSuffix('') // remover completamente o sufixo
export const pinia = createPinia()

declare module 'pinia' {
  export interface MapStoresCustomization {
    // definir o mesmo valor que o anterior
    suffix: ''
  }
}

AVISO

Se estivermos a usar um ficheiro de declaração da TypeScript (como global.d.ts), temos de nos certificar de importarmos 'pinia' no topo do ficheiro para expor todos os tipos existentes.