计算状态与方法
添加派生状态和更新方法
计算状态与方法 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
不止于原始状态
实用的 store 还会公开派生值和行为。SignalStore 通过 withComputed 提供读取模型，通过 withMethods 提供操作行为。
withComputed
withComputed 接收 store 的当前信号，并返回一个由 computed() 信号组成的对象。它们会像任何 computed 一样进行记忆化并自动更新。
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))
}))
);读取 Computed
Computed 成员会像状态一样出现在 store 上。在模板中读取 store.count() 和 store.total()；当 items 发生变化时，它们也会更新。
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods 接收 store 并返回命名的方法。在其中使用 patchState 以不可变方式更新状态。
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))方法也能读取状态
在方法内部，您可以从 store 参数中读取当前信号，从而在应用状态更新前作出判断。
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)
}));
}
}))方法可以使用 computed
由于 withComputed 会先于 withMethods 运行，因此方法可以读取 store 已经公开的 computed 成员。
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))注入依赖
withMethods 会在注入上下文中运行，因此您可以在其中调用 inject() 来获取 HttpClient 或路由器等服务。
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Features 的顺序
Features 会自上而下进行组合。请先放置 withState，然后放置读取状态的 withComputed，最后放置读取状态和 computed 的 withMethods。反过来排列会导致类型错误。
封装
组件调用 store.add(item) 或读取 store.total()，但不会直接调用 patchState，从而将所有变更逻辑保留在 store 内部。
纯 Computed，有副作用的方法
请保持 withComputed 函数纯净（只负责派生数据），将 HTTP 调用或导航等副作用放入 withMethods。
测试方法
SignalStores 是可注入的类。在测试中，通过 TestBed 提供 store，调用一个方法，然后同步断言状态和 computed 信号。
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);快速检查
检查您对 computed 和 methods 的理解。
回顾
您使用 withComputed 为 SignalStore 添加了经过记忆化的读取模型，并使用 withMethods 添加了封装的操作；这些操作可以使用 patchState 和注入的服务。Feature 的顺序确保每一层都能读取它之前的层。
常见问题解答
「计算状态与方法」课时是免费的吗？
是的 — 「计算状态与方法」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「计算状态与方法」这节课中我会学到什么？
添加派生状态和更新方法 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「计算状态与方法」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。