Aula 18 - Gerenciamento de Estado Global com Pinia 🍍

📑 1. Fundamentos Teóricos & Análise Técnica

O Pinia é a biblioteca de gerenciamento de estado oficial recomendada para o ecossistema Vue 3, substituindo o legado Vuex. Projetado do zero para aproveitar os recursos modernos de tipagem do TypeScript e a reatividade da Composition API, o Pinia elimina completamente o boilerplate de mutations, simplifica a arquitetura e melhora a experiência do desenvolvedor (DX).

Principais características arquiteturais do Pinia: 1. Descentralização por Padrão: Não existe uma árvore de estado monolítica central. Cada funcionalidade possui sua própria Store Modular isolada (useUserStore, useCartStore, useThemeStore). 2. Eliminação das Mutações: As mutações síncronas foram extintas; o estado pode ser alterado diretamente dentro de ações (actions), que aceitam tanto lógica síncrona quanto assíncrona (async/await). 3. Suporte a Setup Stores: Definição da store utilizando a mesma sintaxe ergonômica de funções com ref e computed, unificando a forma de codificar componentes e estados globais.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Component["Componente Vue 3 (<script setup>)"] -->|Lê Estado / Getters| PiniaStore["Pinia Modular Store"]
    Component -->|Dispara Ação| Actions["Actions (Sync ou Async)"]
    Actions -->|Atualiza Diretamente| State["State Reativo (ref)"]
    Actions --> API["Servidor / API Externa"]
    style Component fill:#e3f2fd,stroke:#1565c0
    style PiniaStore fill:#fff3e0,stroke:#e65100
    style Actions fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Autocompletion Impecável: Inferência de tipos 100% nativa sem necessidade de wrappers ou tipagens manuais complexas. - Modularidade e Lazy Loading: Stores podem ser divididas em múltiplos arquivos e carregadas dinamicamente via Code Splitting. - Integração com Vue DevTools: Visualização de linha do tempo de ações disparadas e recursos de time-travel debugging. - Subscrições e Plugins: Possibilidade de interceptar ações e sincronizar o estado com o armazenamento local via plugins.

🛠️ 2. Implementação Prática em Pinia e Vue 3 Store Architecture

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// counterStore.ts (Pinia Setup Store com TypeScript)
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  // 1. Estado Reativo (State)
  const count = ref(0);

  // 2. Getters Computados
  const doubleCount = computed(() => count.value * 2);

  // 3. Ações (Actions)
  function increment() {
    count.value++;
  }

  async function asyncIncrement() {
    await new Promise(resolve => setTimeout(resolve, 500));
    count.value += 10;
  }

  return { count, doubleCount, increment, asyncIncrement };
});

💡 Análise Passo a Passo do Código

1. Sintaxe Setup Store: A função passada para defineStore espelha perfeitamente a estrutura de um <script setup>.
2. Ação Assíncrona Direta: asyncIncrement realiza operações de rede ou timers sem precisar registrar mutações separadas.
3. Consumo Ergonômico: No componente, basta importar const store = useCounterStore() e acessar propriedades diretamente.

🎯 3. Próximos Passos & Sequência Didática