Aula 11 – Gerenciamento de Estado com Pinia 🍍

À medida que a aplicação cresce, passar dados via Props por 5 níveis de componentes se torna um pesadelo (Prop Drilling). O Pinia resolve isso criando uma "loja central" de dados acessível por qualquer componente.

🏗️ O que é um Store?

Um Store no Pinia tem três partes principais, muito parecidas com um componente Vue:

1. State: Os dados (equivalente ao ref).
2. Getters: Dados computados (equivalente ao computed).
3. Actions: Funções para mudar os dados (equivalente às functions).

⚙️ Criando seu primeiro Store

Instalação: npm install pinia.

Exemplo: src/stores/carrinho.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCarrinhoStore = defineStore('carrinho', () => {
  // 1. State
  const itens = ref([])

  // 2. Getter
  const totalItens = computed(() => itens.value.length)

  // 3. Action
  function adicionarAoCarrinho(produto) {
    itens.value.push(produto)
  }

  return { itens, totalItens, adicionarAoCarrinho }
})

📥 Usando o Store no Componente

Qualquer componente agora pode usar esses dados sem precisar do pai!

<script setup>
import { useCarrinhoStore } from '../stores/carrinho'

const carrinho = useCarrinhoStore()
</script>

<template>
  <div>
    <p>Produtos no carrinho: {{ carrinho.totalItens }}</p>
    <button @click="carrinho.adicionarAoCarrinho({nome: 'Mouse'})">
      Adicionar Mouse
    </button>
  </div>
</template>

📊 Arquitetura Centralizada

graph TD
    Store["Store (Pinia)"]
    Store --> CompA[Componente A]
    Store --> CompB[Componente B]
    Store --> CompC[Componente C]
    CompB -- "Action: Muda dado" --> Store

🧠 Quando usar o Pinia?

💻 Mão na Massa

Crie um Store chamado useAuthStore que guarde o nome de um usuário e uma booleana isLoggedIn. Crie uma View de Login que altera esses dados e uma Navbar que mostre o nome do usuário se ele estiver logado.

📝 Exercício

1. O que é "Prop Drilling" e como o Pinia ajuda a evitá-lo?
2. Explique a diferença entre State, Getters e Actions no Pinia.
3. Posso alterar o state do Pinia diretamente do componente? É recomendado?

🚀 Próxima Aula: Vamos unir tudo: Roteamento, API e Pinia no Projeto Prático II!