Computed e métodos
Adicione estado derivado e métodos de atualização.
Computed e métodos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Além do estado bruto
Um armazenamento útil expõe valores derivados e comportamento. O SignalStore adiciona esses recursos com withComputed para modelos de leitura e withMethods para ações.
withComputed
withComputed recebe os sinais atuais do armazenamento e retorna um objeto de sinais computed(). Eles armazenam os resultados em cache e são atualizados automaticamente, como qualquer valor computado.
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);Lendo valores computados
Os membros computados aparecem no armazenamento assim como o estado. Leia store.count() e store.total() nos templates; eles são atualizados quando items muda.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods recebe o armazenamento e retorna métodos nomeados. Dentro deles, use patchState para atualizar o estado de forma imutável.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Os métodos também leem o estado
Dentro de um método, você pode ler os sinais atuais pelo argumento que representa o armazenamento e tomar decisões antes de aplicar a atualização.
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))Os métodos podem usar computed
Como withComputed é executado antes de withMethods, os métodos podem ler os membros computados que o armazenamento já expõe.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Injetando dependências
withMethods é executado em um contexto de injeção, portanto chame inject() dentro dele para obter serviços como HttpClient ou um roteador.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Ordem das funcionalidades
As funcionalidades são compostas de cima para baixo. Coloque withState primeiro, depois withComputed (que lê o estado) e então withMethods (que lê o estado e os computados). Inverter essa ordem causa erros de tipo.
Encapsulamento
Os componentes chamam store.add(item) ou leem store.total(). Eles nunca chamam patchState diretamente, mantendo toda a lógica de mutação dentro do armazenamento.
Computados puros, métodos com efeitos
Mantenha puras as funções de withComputed (apenas derivação). Coloque efeitos colaterais, como chamadas HTTP ou navegação, dentro de withMethods.
Testando métodos
SignalStores são classes injetáveis. Nos testes, forneça o armazenamento por meio do TestBed, chame um método e depois faça asserções síncronas sobre o estado e os sinais computados.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Verificação rápida
Verifique sua compreensão sobre valores computados e métodos.
Recapitulação
Você aprimorou um SignalStore com withComputed para modelos de leitura armazenados em cache e withMethods para ações encapsuladas que usam patchState e serviços injetados. A ordem das funcionalidades garante que cada camada possa ler as anteriores.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Computed e métodos” é grátis?
Sim — o texto completo de “Computed e métodos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Computed e métodos”?
Adicione estado derivado e métodos de atualização. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Computed e métodos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Criando um SignalStore
- Computed e métodos
- rxMethod para operações assíncronas
- Entidades e funcionalidades personalizadas