Tengo styles variables en la tienda Svelte que me gustaría actualizar:
export const styles = writable(); Ahora, en mi archivo mainframe.svelte , tengo un EventListener que escucha un clic y actualiza el valor de la tienda de la siguiente manera:
document.addEventListener("click", (e) => { styles.update(() => getComputedStyle(e.target)); }); Y en mi archivo spacing.svelte , quiero console.log cuando cambia el valor, pero no se actualiza en absoluto y está atascado en undefined :
$: console.log(get(styles)); Ahora, si uso setInterval , entonces está funcionando y actualizando los valores según los clics, por lo que definitivamente no es el código, pero el problema es con la reactividad en sí:
setInterval(() => { console.log(get(styles)); }, 1000); ¿Qué estoy haciendo mal aquí? ¿Por qué el valor no cambia automáticamente con los clics pero parece que setInterval funciona?
Esto no funciona debido a cómo funciona la reactividad. En su código $: console.log(get(styles)); tienes las siguientes partes:
$: esto marca la línea como reactiva, se ejecutará nuevamente cuando cambie cualquier variable (o función) utilizada en esa línea. console.log , esto nunca cambia get , esta es una función auxiliar de las tiendas, nunca cambia de styles , esta es la tienda que nunca cambia (el valor sí lo hace, pero no la tienda en sí)
conclusión: esta línea se ejecuta una vez y luego nunca más.
la solución es simple, en lugar de get , que se usa para obtener el valor actual de una tienda una vez (y generalmente solo se usa en archivos de script donde la reactividad no funciona), simplemente puede usar el valor en sí:
$: console.log($styles);