Computed และเมธอด
เพิ่มสถานะที่อนุมานและเมธอดสำหรับอัปเดต
Computed และเมธอด เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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))
}))
);การอ่านค่าที่คำนวณ
สมาชิกที่คำนวณจะปรากฏบน 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 เมธอดจึงสามารถอ่านสมาชิก computed ที่ store เปิดเผยไว้แล้วได้
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 }));
}
}))ลำดับของฟีเจอร์
ฟีเจอร์จะถูกประกอบจากบนลงล่าง ให้ใส่ withState ก่อน ตามด้วย withComputed (อ่านสถานะ) แล้วจึงเป็น withMethods (อ่านสถานะและ computed) หากกลับลำดับจะทำให้เกิดข้อผิดพลาดของชนิด
การห่อหุ้ม
คอมโพเนนต์เรียก store.add(item) หรืออ่าน store.total() โดยไม่เรียก patchState โดยตรง ทำให้ตรรกะการเปลี่ยนแปลงทั้งหมดอยู่ภายใน store
Computed ที่บริสุทธิ์ เมธอดที่มีผลข้างเคียง
ทำให้ฟังก์ชัน withComputed บริสุทธิ์ (คำนวณค่าอนุพันธ์เท่านั้น) ส่วนผลข้างเคียง เช่น การเรียก HTTP หรือการนำทาง ให้ใส่ไว้ใน withMethods
การทดสอบเมธอด
SignalStore เป็นคลาสที่ฉีดได้ ในการทดสอบ ให้จัดเตรียม store ผ่าน TestBed เรียกเมธอด แล้วตรวจสอบสถานะและสัญญาณที่คำนวณได้แบบซิงโครนัส
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความเข้าใจเกี่ยวกับ computed และ methods
สรุปทบทวน
คุณได้เพิ่มความสามารถให้ SignalStore ด้วย withComputed สำหรับโมเดลข้อมูลที่ใช้ในการอ่านและจดจำผลลัพธ์ และ withMethods สำหรับแอ็กชันที่ห่อหุ้มและใช้ patchState รวมถึงบริการที่ฉีดเข้ามา ลำดับของฟีเจอร์ทำให้แต่ละชั้นอ่านชั้นที่อยู่ก่อนหน้าได้
คำถามที่พบบ่อย
บทเรียน “Computed และเมธอด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Computed และเมธอด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Computed และเมธอด”
เพิ่มสถานะที่อนุมานและเมธอดสำหรับอัปเดต คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Computed และเมธอด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ