Angular Academy · Lekcja

Wyprowadzanie stanu za pomocą computed

Budować modele odczytu na podstawie stanu bazowego

Wyprowadzanie stanu za pomocą computed to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Stan pochodny

Często stan jest obliczany na podstawie innego stanu: suma na podstawie elementów, odfiltrowana lista czy flaga poprawności. Angularowe computed() tworzy sygnał tylko do odczytu, którego wartość wynika z innych sygnałów.

Tworzenie wartości computed

Przekaż funkcję do computed(). Odczytuje ona inne sygnały i zwraca wartość. Wynik jest ponownie obliczany tylko wtedy, gdy zmieni się jedna z jego zależności.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Automatyczne śledzenie zależności

Nie trzeba deklarować zależności. Wszystkie sygnały odczytywane wewnątrz funkcji automatycznie stają się zależnościami. Zmień qty, a total zostanie przeliczone; zmiana niezwiązanego sygnału nie wywoła ponownego obliczenia.

Zapamiętywanie wyników

computed() buforuje swój wynik. Wielokrotny odczyt uruchamia funkcję tylko raz, aż do zmiany zależności. Dzięki temu pochodne modele odczytu są tanie nawet wtedy, gdy są używane w wielu powiązaniach szablonu.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

computed w magazynie

W magazynie sygnałów udostępniaj obliczane modele odczytu, aby komponenty otrzymywały wartości gotowe do wyświetlenia zamiast ponownie obliczać je w szablonach.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Łączenie wartości computed

Sygnały obliczane mogą odczytywać inne sygnały obliczane. Buduj wielowarstwowe modele odczytu: podstawowe wyprowadzenie zasila model wyższego poziomu.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtrowanie i wyszukiwanie

Typowy model odczytu polega na filtrowaniu listy na podstawie sygnału wyszukiwania. Wynik filtrowania aktualizuje się za każdym razem, gdy zmieni się lista lub zapytanie.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Brak efektów ubocznych

Funkcja computed() musi być czysta: odczytuje tylko sygnały i zwraca wartość. Nie modyfikuj w niej stanu, nie wywołuj API ani nie zapisuj do innych sygnałów. Do efektów ubocznych używaj zamiast tego effect().

Równość i pomijanie aktualizacji

Domyślnie computed używa równości referencyjnej (Object.is), aby określić, czy wartość się zmieniła. Jeśli nowa wartość jest równa poprzedniej, konsumenci nie są powiadamiani, co pozwala uniknąć zbędnej pracy.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Używanie computed w szablonach

Odczytuj sygnały obliczane w szablonach tak samo jak dowolne inne sygnały. Angular aktualizuje tylko te powiązania, których obliczona wartość rzeczywiście się zmieniła.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computed a metody

Używaj computed() dla wartości wyprowadzanych ze stanu, które powinny aktualizować się automatycznie i korzystać z zapamiętywania wyników. Zwykłej metody używaj do jednorazowych obliczeń, które przyjmują argumenty lub powinny być uruchamiane na żądanie.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat sygnałów obliczanych.

Podsumowanie

Zbudowali Państwo stan pochodny za pomocą computed(): automatyczne śledzenie zależności, zapamiętywane funkcje czyste, łańcuchowe modele odczytu oraz pomijanie aktualizacji na podstawie równości. Udostępniaj obliczane modele odczytu z magazynów, aby szablony zachowały deklaratywny charakter.

Często zadawane pytania

Czy lekcja „Wyprowadzanie stanu za pomocą computed” jest bezpłatna?

Tak — pełny tekst „Wyprowadzanie stanu za pomocą computed” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyprowadzanie stanu za pomocą computed”?

Budować modele odczytu na podstawie stanu bazowego Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wyprowadzanie stanu za pomocą computed”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy