Pinia

Pinia
Autor	Eduardo San Martin Morote
Lançamento inicial	novembro de 2019 (6 anos)
Lançamento estável	2.3.1 / 20 de janeiro de 2025
Repositório	github.com/vuejs/pinia
Escrito em	TypeScript
Plataforma	Web
Antecessor	Vuex
Tamanho	~1.5 KB
Tipo	Biblioteca de gestão de estado
Licença	Licença MIT
Website	pinia.vuejs.org

Pinia é uma biblioteca de armazenamento e um framework de gestão de estado para Vue.js.^[1] Foi concebida principalmente para o desenvolvimento de aplicações web front-end, utilizando uma sintaxe declarativa e fornecendo a sua própria API de gestão de estado. A Pinia foi endossada pela equipa do Vue.js como uma alternativa credível ao Vuex e é actualmente a biblioteca oficial de gestão de estado do ecossistema Vue.^[2]

Ao contrário do Vuex, a Pinia é modular por concepção e não utiliza mutações. Isto permite aos programadores criar múltiplas stores e importá-las conforme necessário nos componentes. O framework disponibiliza um armazenamento centralizado com mecanismos integrados para guardar, actualizar e recuperar o estado da aplicação.^[3]

A Pinia foi idealizada pelo programador do Vue.js Eduardo San Martin Morote^[4] como uma exploração de como o Vuex poderia evoluir no futuro.^[5] O objectivo era criar uma API mais simples, com menos complexidade estrutural, e melhorar o suporte à inferência de tipos em TypeScript.^[6] A Pinia tornou-se uma parte oficial do ecossistema Vue.js a 7 de Fevereiro de 2022.^[5]

O nome da biblioteca deriva da palavra espanhola piña, que significa “ananás”. Segundo os seus criadores, um ananás é composto por várias flores individuais que se unem para formar um único fruto, de forma semelhante às stores, que nascem individualmente mas permanecem interligadas.^[7]

As stores na Pinia são definidas através de um objecto JavaScript com várias propriedades que determinam o seu comportamento. Estas propriedades são consideradas os “pilares” de uma store e incluem id, state, getters e actions.^[8]

import { defineStore, acceptHMRUpdate } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  getters: {
    doubleCount: (state) => state.counter * 2,
  },

  actions: {
    increment() {
      this.counter++;
    },
  },
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot));
}

A Pinia integra-se com o Vue Devtools, uma extensão popular para depuração de aplicações Vue.js.^[9]

O framework oferece suporte a vários plugins, incluindo Nuxt e o Vue Devtools.^[10]

A Pinia permite a substituição dinâmica de módulos (hot module replacement), possibilitando a modificação das stores sem recarregar a página e preservando o estado actual da aplicação.

• Vue.js

• «Página oficial» 
• pinia no GitHub