📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 13: Estado Global com Pinia

Especialização em Frontend com Vue.js

---

🗺️ A Arquitetura do Pinia Store (Setup Stores)

flowchart TD
    STORE["defineStore('carrinho', () => {\n  const itens = ref([]);\n  const total = computed(() => ...);\n  function adicionar(item) { ... }\n  return { itens, total, adicionar };\n})"]
    --> COMP1["Componente Navbar.vue\n(Lê store.total)"]
    --> COMP2["Componente Vitrine.vue\n(Dispara store.adicionar(produto))"]
    COMP2 --> STORE

    style STORE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMP1 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style COMP2 fill:#fff3e0,stroke:#ff9800,stroke-width:2px

---

🎯 Slide 1: Por Que o Pinia Substituiu o Vuex?

• Zero Mutações: Diga adeus ao padrão verboso de mutations síncronas e actions assíncronas do Vuex. No Pinia, actions aceitam código síncrono ou assíncrono diretamente!

• TypeScript de Primeira Classe: Auto-complete e verificação estrita de tipos sem precisar de anotações complexas.

• Modular: Múltiplas stores independentes com divisão automática de código (code splitting).

---

🎯 Slide 2: Setup Store Elegante

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

export const useCarrinhoStore = defineStore('carrinho', () => {
  const itens = ref<Item[]>([]);
  const total = computed(() => itens.value.reduce((acc, i) => acc + i.preco, 0));

  function adicionar(item: Item) {
    itens.value.push(item);
  }

  return { itens, total, adicionar };
});

---

🎯 Slide 3: Consumindo com storeToRefs

const carrinho = useCarrinhoStore();
// Mantém a reatividade ao desestruturar state e getters:
const { itens, total } = storeToRefs(carrinho);
const { adicionar } = carrinho; // Actions podem ser desestruturadas diretamente!

---

🔗 Navegação do Capítulo 13

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim