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

Question

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

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

Answer 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