Svelte：当组件更改数据时存储数据不响应，反之亦然

Posted 2023-03-16

【中文标题】Svelte：当组件更改数据时存储数据不响应，反之亦然

【英文标题】：Svelte: Store Data Not Being Reactive When Component Changes Data and Vice Versa

【发布时间】：2022-01-24 04:18:07

【问题描述】：

我确信这是一个超级简单的解决方法，但我在设置可写存储时遇到了问题，它主要是反应性的，除非组件更改数据时，应用程序文件中的反应性不会火，反之亦然。代码如下：

App.svelte：

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

<h2>In App.svelte</h2>

<p>Hello localData.name!</p>

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

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

<h2>In Component.svelte</h2>

<Component />

Component.svelte：

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

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

<p>Hello localData.name!</p>
<p>localData.details.number</p>

store.js：

import  writable  from 'svelte/store'

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

如果你想在 Svelte REP 中使用它：https://svelte.dev/repl/164227336d6c4cc29f7ea0a15e89c584?version=3.44.3

【参考方案1】：

您正在订阅数据并将其放入局部变量，然后绑定到该变量。这意味着商店不知道任何更改并且不会传播更新。两种选择：

第一个选项：您摆脱双向绑定并像这样显式更新商店：

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

    function updateName(evt) 
        const newName = evt.target.value;
        data.update(value => (...value, name: newName ));
    
</script>

<h2>In App.svelte</h2>

<p>Hello localData.name!</p>

<input name="name" type="text" value=localData.name on:input=updateName>

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

<h2>In Component.svelte</h2>

<Component />

这是非常明确的，但也有点样板。我们有 Svelte 方便的自动订阅功能，所以让我们改用它。第二个也是首选：

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

<h2>In App.svelte</h2>

<p>Hello $data.name!</p>

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

<p>
    $data.details.number
</p>

<h2>In Component.svelte</h2>

<Component />

请注意我们如何摆脱所有订阅样板。 $data 访问存储的当前状态，由于它是可写存储，因此您也可以通过这种方式回写它。您可以在文档中阅读有关商店的更多信息：https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values

【讨论】：

看，我知道这很简单！非常感谢您快速而有帮助的回复。