Estoy jugando con la tienda svelte en svelte docs env svelte Stores/autosubscription .
De hecho, estoy tratando de agregar objetos a una matriz llamada puntajes. Mi código es el siguiente.
App.esbelta
<script> import { scores } from './stores.js'; import Incrementer from './Incrementer.svelte'; import Decrementer from './Decrementer.svelte'; import Resetter from './Resetter.svelte'; </script> <h1>The count is:</h1> {#each $scores as score, i} <ul> <li> name: {score.name} </li> <li> score: {score.score} </li> <li> maxScore: {score.maxScore} </li> </ul> {/each} <Incrementer/> <Decrementer/> <Resetter/>Incrementador.esbelto
<script> import { scores } from './stores.js'; function increment() { count.update(n => n.push(n[0])); } </script> <button on:click={increment}> + </button>Resetter.svelte
<script> import { scores } from './stores.js'; function reset() { scores.set([{ name: 'name', score: 1, maxScore: 1 },{ name: 'anderer', score: 4, maxScore: 8 }]); } </script> <button on:click={reset}> reset </button>y finalmente las tiendas.js
import { writable } from 'svelte/store'; export const scores = writable([{name: 'NAME', score: 1000, maxScore: 3000}]);(Omití Decrementer.svelte que es idéntico a Incrementer.svelte pero implementa n.pop)
Cuál es mi problema, que el incrementador y el decrementador no cambian los puntajes de $ que se ven en la ventana de resultados.
También he intentado empujar un objeto en Incrementer.svelte:
function increment() { count.update(n => n.push({name: 'name', score: 2, maxScore: 3})); }El código de reinicio funciona como pretendía.
¿Puede alguien decirme, por favor, lo que me estoy perdiendo aquí?
¡Gracias!
Donde falta algo de contexto aquí
count.update(n => n.push(n[0])); el count no está definido en ninguno de los fragmentos, supongo que te refieres a puntajes.actualizar
La devolución de la devolución de llamada pasada a la actualización se convierte en el nuevo valor, en el caso de una inserción que será un número (la nueva longitud de la matriz) no la nueva matriz.
esperaba ver un
scores.update(n => { n.push(n[0]); return n}); // or scores.update(n => [...n, n[0]]); // or $scores = [...$scores, $scores[0]];Para depurar una tienda, escriba la siguiente línea en un componente:
$: console.log($scores);