es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Svelte: Almacenar datos sin reactividad cuando el componente modifica los datos y viceversa.

Svelte: Almacenar datos sin reactividad cuando el componente modifica los datos y viceversa.

27 Jul, 2023 Programación

Estoy seguro de que esto es una solución muy fácil, pero tengo un problema en el que configuro una tienda modificable, y es en su mayoría reactiva, excepto cuando un componente cambia los datos, la reactividad en el archivo App no se activa y viceversa. Aquí está el código:

App.svelte:

<script>
    import { data } from './store.js'
    import Component from './Component.svelte'
    let localData
    data.subscribe((value) => {
        localData = value;
    });
</script>

<h2>En App.svelte</h2>

<p>Hola {localData.name}!</p>

<input name="name" type="text" bind:value="{localData.name}">

<p>
    {localData.details.number}
</p>

<h2>En Component.svelte</h2>

<component></component>
<code>
Component.svelte:
</code>
<script>
    import { data } from './store.js'
    let localData
    data.subscribe((value) => {
        localData = value;
    });
</script>

<input type="number" bind:value="{localData.details.number}">

<p>Hola {localData.name}!</p>
<p>{localData.details.number}</p>
<code>
store.js:
</code>
import { writable } from 'svelte/store'

export let data = writable({
    name: 'Bob Smith',
    details: {
        dob: '1982/03/12',
        favoriteFoods: ['apples', 'pears', 'bourbon'],
        number: 1
    },
})

Y, si quieres usarlo en el Svelte REP: https://svelte.dev/repl/164227336d6c4cc29f7ea0a15e89c584?version=3.44.3

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema con el código es que la variable localData definida tanto en App.svelte como en Component.svelte solo se actualiza cuando cambia data, pero no al revés. Esto significa que si localData se actualiza en App.svelte, los cambios no se verán reflejados en Component.svelte y viceversa.

    Para solucionar este problema, podemos eliminar las variables locales localData y utilizar directamente el almacén data tanto en App.svelte como en Component.svelte.

    Aquí está el código actualizado de App.svelte:

    <script>
  import { data } from './store.js'
  import Component from './Component.svelte'
</script>

<h2>En App.svelte</h2>

Hola {($data.name)}!

<input name="name" type="text" bind:value="{$data.name}">

{$data.details.number}

<h2>En Component.svelte</h2>

<component></component>

    Y aquí está el código actualizado de Component.svelte:

    <script>
  import { data } from './store.js'
</script>

<input type="number" bind:value="{$data.details.number}">

Hola {($data.name)}!

{$data.details.number}

    Al utilizar el símbolo $ antes de data, podemos acceder directamente al valor actual del almacén, el cual es reactivo y siempre está actualizado. Esto asegura que cualquier cambio realizado en data se refleje inmediatamente tanto en App.svelte como en Component.svelte.

    Espero que esto ayude. Hazme saber si tienes alguna otra pregunta.

Comments are closed.