🌐 Exemplo 11 - Alpine.store() Estado Global
1. Store Simples (Carrinho)
Adicionar Produto
Adicionar ao Carrinho
Carrinho
Total de itens:
Valor total:
R$
Alpine.store('nome', {...}) define uma store global
Acesse com $store.nome de qualquer componente
2. Listar Itens da Store
Produtos no Carrinho
x R$
= R$
✕
Carrinho vazio
Limpar Carrinho
Acesse $store.carrinho.items em qualquer componente
3. Múltiplas Stores (Tema e Notificações)
Alterar Tema
Modo atual:
Trocar para
Disparar Notificações
Sucesso
Erro
Você pode criar múltiplas stores para diferentes aspectos da aplicação
4. Centro de Notificações
Notificações (
)
✕
Nenhuma notificação
Notificações são compartilhadas entre componentes via store
5. Getters Computados em Store
Total de itens:
Valor total:
R$
Getters na store (get propriedade() {...}) calculam valores reativos
Útil para totais, filtros, contadores, etc.
6. Exemplo Completo: Loja
Produtos Disponíveis
R$
Adicionar
Resumo do Carrinho
Itens:
Total:
R$
Finalizar Compra
Combine store com componentes para criar aplicações reativas