Aquí el REPL: https://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e?version=3.42.1
Aquí el código:
App.svelte:
<script> import {editableStore} from "./store"; let name = "John" $: player = editableStore(name); </script> <h1>Hello {$player.name}!</h1> <button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}> Change name </button> <h2>Log:</h2> {#each $player.log as log} <li>{log}</li> {/each}tienda.js:
import {writable} from "svelte/store"; const defaultStore = { name: "Bob", age: 18, log: [] }; export const editableStore = (name) => { console.log("Recreated with name:", name); const {subscribe, update} = writable({...defaultStore}, () => () => clearInterval); if (name) { update(s => ({...s, name})); } const clearInterval = setInterval(() => { update(s => ({...s, log: [...s.log, new Date()]})) }, 1000) return { subscribe }; };Como puede ver, si hace clic en "Cambiar nombre", la tienda se vuelve a crear.
Esto es lo que necesito evitar.
¿Pero cómo?
En lugar de volver a crear la tienda cada vez que cambie el name , créela solo una vez y configure $player.name cuando cambie el name .
<script> import {editableStore} from "./store"; let name = "John"; let player = editableStore(name); $: $player.name = name; </script> Esto requerirá que actualice su método de tienda para devolver la función set .
export const editableStore = (name) => { console.log("Recreated with name:", name); // also destructure set here const {subscribe, update, set} = writable({...defaultStore}, () => () => clearInterval); if (name) { update(s => ({...s, name})); } const clearInterval = setInterval(() => { update(s => ({...s, log: [...s.log, new Date()]})) }, 1000) // also return set here return { subscribe, set }; };Intente instanciar su tienda lo más pronto posible como en el archivo ./store.js y luego use el método set o update en lugar de instanciarlo directamente en el componente:
// store.js import {writable} from "svelte/store"; const defaultStore = { name: "Bob", age: 18, log: [] }; export const createEditableStore = () => { const {subscribe, update, set} = writable({...defaultStore}, () => () => clearInterval); const clearInterval = setInterval(() => { update(s => ({...s, log: [...s.log, new Date()]})) }, 1000) return { subscribe, set, update }; }; export const player = createEditableStore() <!-- App.svelte --> <script> import { player } from "./store"; let name = "John" $: player.update(p => ({ ...p, name })) </script> <h1>Hello {$player.name}!</h1> <button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}> Change name </button> <h2>Log:</h2> {#each $player.log as log} <li>{log}</li> {/each}Echa un vistazo a la REPL .