Gerenciamento de Estado (Pinia) 🍍

Aula 11 - Estado Global sem Sofrimento

🧩 O Problema do Estado Local

• Quando muitos componentes precisam do mesmo dado
• Prop Drilling: Passar dados por 5 níveis de componentes
• Event Hell: Emitir eventos até o topo e descer de novo

🍍 A Solução: Pinia

• O sucessor oficial do Vuex
• Uma "nuvem" de dados acessível por qualquer componente
• Intuitivo, Tipado e Performante

🏢 Arquitetura da Store

• State: Onde os dados vivem (ex: lista de favoritos)
• Actions: Funções que mudam os dados (ex: addFavorito)
• Getters: Dados derivados/calculados (ex: qtdFavoritos)

🏗️ Criando a Store (Setup Style)

export const useUserStore = defineStore('user', () => {
  const name = ref('Visitante') // State

  function updateName(novo) { // Action
    name.value = novo
  }

  return { name, updateName }
})

🔌 Consumindo no Componente

import { useUserStore } from '@/stores/user'
const store = useUserStore()

// Usando no template:
// {{ store.name }}

📊 Fluxo Global de Dados

graph LR
    A[Componente A] -- muda --> S[Pinia Store]
    B[Componente B] -- lê <-- S
    C[Componente C] -- lê <-- S

⚡ Reatividade do Pinia

• A store é reativa por padrão
• Se mudar no Pinia, todos os componentes que usam aquele dado atualizam instantaneamente

🧪 Quando usar Pinia?

• Dados de Autenticação (User logado)
• Carrinho de Compras
• Preferências de Tema (Dark/Light)
• Dados compartilhados entre rotas diferentes

🕵️ Debbuging com DevTools

• O Pinia tem integração total com as ferramentas de desenvolvedor
• Mude o estado manualmente para testar a interface
• Veja o histórico de todas as ações disparadas

💾 Persistência de Store

• O Pinia morre ao atualizar a página (F5)
• Solução: Use plugins como pinia-plugin-persistedstate
• Salva automaticamente no LocalStorage

🏗️ Store vs Composable

• Store: Singleton (instância única), dados compartilhados.
• Composable: Pode ter múltiplas instâncias, cada uma com seu próprio estado.

🚀 Limpando a Store

• store.$reset(): Volta todos os dados para o valor inicial (apenas em Options Style)
• Ou crie sua própria função reset

🏗️ Desafio da Aula

• Criar uma useCartStore (Carrinho)
• Funcionalidade para Adicionar e Remover Produtos
• Getter para calcular o valor total
• Mostrar a quantidade no Header e a lista no Carrinho

🏁 Resumo

• Pinia centraliza o que é importante
• State (dado), Actions (mudança), Getters (cálculo)
• Adeus Prop Drilling!

🏁 Dúvidas?

Bons estados! Próxima aula: Projeto Prático II (CRUD).