🧩 Exercícios Práticos: Gerenciamento de Estado Global com Pinia

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 13.1 — Definição de Store com defineStore e Setup Stores

Contexto: Definição de Store com defineStore e Setup Stores no contexto de Gerenciamento de Estado Global com Pinia.

Requisitos de Execução:

  1. Criar store useAuthStore usando a sintaxe moderna de Setup Store (ref, computed, function).

Resultado Esperado

Store global Pinia criada com Composition API nativa.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_13_1_SeuNome
  2. Envie na tarefa: Atividade Cap 13 - Gerenciamento de Estado Global com Pinia
🔑 Gabarito de Código & Solução Comentada 
// stores/auth.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const token = ref<string | null>(null);
  const user = ref<{ id: number; nome: string } | null>(null);

  const isAuthenticated = computed(() => Boolean(token.value));

  function setAuth(novoToken: string, novoUser: any) {
    token.value = novoToken;
    user.value = novoUser;
  }

  function logout() {
    token.value = null;
    user.value = null;
  }

  return { token, user, isAuthenticated, setAuth, logout };
});

🔍 Nível 2: Prática

Problema 13.2 — Consumo e Desestruturação Reativa com storeToRefs()

Contexto: Consumo e Desestruturação Reativa com storeToRefs() no contexto de Gerenciamento de Estado Global com Pinia.

Requisitos de Execução:

  1. Consumir store desestruturando propriedades com storeToRefs(authStore) preservando a reatividade.

Resultado Esperado

Propriedades reativas da store desestruturadas no componente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_13_2_SeuNome
  2. Envie na tarefa: Atividade Cap 13 - Gerenciamento de Estado Global com Pinia
🔑 Gabarito de Código & Solução Comentada 
<!-- PerfilView.vue -->
<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';
import { storeToRefs } from 'pinia';

const authStore = useAuthStore();
const { user, isAuthenticated } = storeToRefs(authStore);
</script>

<template>
  <div v-if="isAuthenticated">Bem-vindo, {{ user?.nome }}</div>
</template>

⚡ Nível 3: Integração

Problema 13.3 — Ações Assíncronas na Store com Chamadas a APIs

Contexto: Ações Assíncronas na Store com Chamadas a APIs no contexto de Gerenciamento de Estado Global com Pinia.

Requisitos de Execução:

  1. Implementar action assíncrona fetchProdutos() na store gerenciando estado de loading e erros.

Resultado Esperado

Store gerenciando busca de dados assíncronos e atualizando a lista reativa.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_13_3_SeuNome
  2. Envie na tarefa: Atividade Cap 13 - Gerenciamento de Estado Global com Pinia
🔑 Gabarito de Código & Solução Comentada 
// stores/produtos.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useProdutosStore = defineStore('produtos', () => {
  const lista = ref<any[]>([]);
  const loading = ref(false);

  async function carregar() {
    loading.value = true;
    try {
      const res = await fetch('/api/produtos');
      lista.value = await res.json();
    } finally {
      loading.value = false;
    }
  }

  return { lista, loading, carregar };
});

🏆 Nível 4: Desafio Corporativo

Problema 13.4 — Comunicação entre Múltiplas Stores Pinia

Contexto: Comunicação entre Múltiplas Stores Pinia no contexto de Gerenciamento de Estado Global com Pinia.

Requisitos de Execução:

  1. Injetar useAuthStore dentro de useCarrinhoStore para incluir token de autenticação no checkout.

Resultado Esperado

Composição modular de múltiplas stores do Pinia.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_13_4_SeuNome
  2. Envie na tarefa: Atividade Cap 13 - Gerenciamento de Estado Global com Pinia
🔑 Gabarito de Código & Solução Comentada 
// stores/carrinho.ts
import { defineStore } from 'pinia';
import { useAuthStore } from './auth';

export const useCarrinhoStore = defineStore('carrinho', () => {
  const auth = useAuthStore();

  function finalizarCompra() {
    if (!auth.isAuthenticated) throw new Error('Autenticação obrigatória');
    console.log('Finalizando compra para:', auth.user?.nome);
  }

  return { finalizarCompra };
});
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos