Pular para conteúdo

Exercícios 10 - Stores e Gerenciamento de Estado 📦

🟢 Básicos

  1. Utilidade: Em qual situação é melhor usar uma Store em vez de passar dados via Props?
  2. Atalho: O que o caractere $ faz quando colocado antes do nome de uma store em um componente Svelte?

🟡 Intermediários

  1. Update vs Set: Quando você deve usar o método .update() em vez do .set() em uma writable store?
  2. Inscrição Manual: Escreva o código para se inscrever (subscribe) manualmente em uma store chamada tema e salvar o valor em uma variável local. Não esqueça de mencionar como você faria para "desinscrever".

🔴 Desafio

  1. Sistema de Autenticação Centralizado:
    • Crie um arquivo auth.js com uma store user que guarda um objeto (pode iniciar como null).
    • Crie dois componentes: Login.svelte e Dashboard.svelte.
    • No Login, ao clicar em um botão, atualize a store com um usuário fictício (ex: {nome: 'Fulano', email: 'fulano@teste.com'}).
    • No App.svelte, use um {#if $user} para alternar entre mostrar o Login ou o Dashboard.
    • No Dashboard, exiba o nome do usuário vindo da store e adicione um botão "Logoff" que limpe a store.