🖥️ Abrir Apresentação Interativa em Tela Cheia

render_macros: false

Aula 10 - Svelte Stores 📦

Gerenciando o Estado Global

Agenda de Hoje 📅

O Problema das Props (Prop Drilling)
O que são Stores?
Writable Stores: Criando e Atualizando
O Atalho Mágico: O símbolo $
Derived Stores: Dados Calculados
Prática: Carrinho de Compras

1. O Problema: Prop Drilling 🕳️

Passar dados do Vovô para o Neto via pais é cansativo.
Gera código redundante e difícil de manter.
Solução: Um "balde" central de dados acessível por todos.

2. Apresentando as Stores 🏪

Stores são objetos que contêm um valor.
Múltiplos componentes podem "assinar" (subscribe) a store.
Quando o valor muda, todos os assinantes se atualizam.

3. Criando uma Writable Store ✍️

/* src/stores.js */
import { writable } from 'svelte/store';

export const contador = writable(0);

writable(valor_inicial): Cria uma store que permite escrita e leitura.

4. Usando o Atalho $ (Mágica) ✨

O Svelte facilita a vida com o prefixo $.
Ele faz o subscribe e o unsubscribe automaticamente para você!

<script>
  import { contador } from './stores.js';
</script>

<h1>O valor é {$contador}</h1>
<button on:click={() => $contador += 1}> +1 </button>

5. Métodos set e update 🛠️

Se você não quiser usar o $, pode usar os métodos manuais:

set(novoValor): Substitui o valor.
update(n => n + 1): Usa o valor atual para gerar o novo.

6. Derived Stores (Derivadas) 🧪

Funcionam como as declarações $: mas em nível global.

import { derived } from 'svelte/store';
import { contador } from './stores.js';

export const dobro = derived(contador, ($contador) => $contador * 2);

7. Fluxo da Store 🌊

graph LR
    S[(Store Central)] -->|Subscribe| C1[Componente A]
    S -->|Subscribe| C2[Componente B]
    C1 -->|Update| S
    S -.->|Reatividade| C2

8. Persistência de Dados 💾

Stores resetam ao recarregar a página.
Podemos usar o localStorage para salvar dados entre sessões.

9. Prática: Favoritos de Filmes ⭐

Crie uma store favoritos (um array vazio).
No componente de filme, adicione um botão para "Favoritar".
Exiba a quantidade total de favoritos no cabeçalho do site.

10. Resumo da Aula ✅

Stores evitam a passagem excessiva de props.
Writable: Pode ser alterada.
$nomeStore: Sincronização automática e limpa.

Próxima Aula: APIs REST 🌐

Consumindo dados reais.
O bloco {#await}.
fetch() e Promises.

Dúvidas? 🤔

"Centralizar o estado é o primeiro passo para uma aplicação escalável."