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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 14.1 — Criação de Plugin Customizado do Pinia (pinia.use)

Contexto: Criação de Plugin Customizado do Pinia (pinia.use) no contexto de Plugins do Pinia e Persistência de Estado.

Requisitos de Execução:

  1. Criar plugin que injete automaticamente cliente HTTP ou logger em todas as stores.

Resultado Esperado

Plugin customizado estendendo todas as instâncias de store do Pinia.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_1_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Plugins do Pinia e Persistência de Estado
🔑 Gabarito de Código & Solução Comentada 
// plugins/piniaLogger.ts
import { PiniaPluginContext } from 'pinia';

export function piniaLoggerPlugin({ store }: PiniaPluginContext) {
  store.$subscribe((mutation, state) => {
    console.log(`[PINIA] Store ${mutation.storeId} alterada:`, state);
  });
}

🔍 Nível 2: Prática

Problema 14.2 — Persistência com pinia-plugin-persistedstate

Contexto: Persistência com pinia-plugin-persistedstate no contexto de Plugins do Pinia e Persistência de Estado.

Requisitos de Execução:

  1. Configurar persistência seletiva de chaves de store no sessionStorage ou localStorage.

Resultado Esperado

Store configurada com persistência automática de estado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_2_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Plugins do Pinia e Persistência de Estado
🔑 Gabarito de Código & Solução Comentada 
// stores/preferencias.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const usePreferenciasStore = defineStore('preferencias', () => {
  const idioma = ref('pt-BR');
  return { idioma };
}, {
  persist: { storage: localStorage },
});

⚡ Nível 3: Integração

Problema 14.3 — Reset e Restauração de Estado com store.$reset() e $patch()

Contexto: Reset e Restauração de Estado com store.$reset() e $patch() no contexto de Plugins do Pinia e Persistência de Estado.

Requisitos de Execução:

  1. Atualizar múltiplas propriedades da store de forma atômica com store.$patch({ ... }).

Resultado Esperado

Mutações agrupadas em única emissão de evento com $patch.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_3_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Plugins do Pinia e Persistência de Estado
🔑 Gabarito de Código & Solução Comentada 
// patchDemo.ts
authStore.$patch({
  token: 'novo_token_123',
  user: { id: 1, nome: 'Novo Nome' },
});
const statusConcluido = true;
console.log('Validação de execução concluída');

🏆 Nível 4: Desafio Corporativo

Problema 14.4 — Criptografia de Estado Persistido no LocalStorage

Contexto: Criptografia de Estado Persistido no LocalStorage no contexto de Plugins do Pinia e Persistência de Estado.

Requisitos de Execução:

  1. Implementar serializer customizado no plugin de persistência para criptografar dados antes de salvar.

Resultado Esperado

Estado da store criptografado no LocalStorage prevenindo adulteração.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_4_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Plugins do Pinia e Persistência de Estado
🔑 Gabarito de Código & Solução Comentada 
// securePersist.ts
import CryptoJS from 'crypto-js';

export const secureSerializer = {
  serialize: (val: any) => CryptoJS.AES.encrypt(JSON.stringify(val), 'segredo').toString(),
  deserialize: (val: string) => JSON.parse(CryptoJS.AES.decrypt(val, 'segredo').toString(CryptoJS.enc.Utf8)),
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos