Svelte 41: Stores Derivados (derived)
easy⏱ 5 mincoursesvelte
derived(store, fn) — una sola fuente
derived toma un store fuente y una función; cada vez que la fuente cambia, tu función se vuelve a ejecutar y el valor del store derivado se actualiza. Igual que readable, el objeto que obtienes solo tiene .subscribe — no puedes hacer .set() sobre un store derivado, su valor siempre se calcula, nunca se asigna.
import { derived } from 'svelte/store';
export const itemCount = derived(cartItems, ($items) =>
$items.reduce((sum, item) => sum + item.qty, 0)
);
derived([a, b], fn) — varias fuentes
Pasa un ARREGLO de stores fuente en vez de uno solo, y tu callback recibe un arreglo con sus valores actuales en el mismo orden. Esto te permite combinar varias piezas de estado independientes — aquí, itemCount y cartTotal, que son EN SÍ MISMOS stores derivados — en un solo resumen formateado, sin duplicar ningún estado.
export const cartSummary = derived(
[itemCount, cartTotal],
([$itemCount, $cartTotal]) => $itemCount + ' items, $' + $cartTotal.toFixed(2)
);
Las cadenas de derived son igual de reactivas
cartSummary deriva de otros dos stores derivados, que a su vez derivan de cartItems. Cambia cartItems una sola vez, y la actualización se propaga por toda la cadena automáticamente — Svelte solo recalcula lo que realmente está río abajo de lo que cambió.