O que é o Pinia?

Pinia é uma biblioteca moderna de gestão de estado para Vue.js, que substituiu o Vuex. É mais fácil de usar, tem uma API mais compreensível e integra-se melhor com a API de composição do Vue 3. Pinia permite criar armazéns de dados centralizados que podem ser usados em todos os componentes da aplicação.

Exemplo de criação e uso de uma loja Pinia:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// No componente
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
counter.increment()
console.log(counter.count) // 1