为什么可写数组不能正确更新 Svelte 组件内的值？

Question

I have a parent template (App.svelte) which creates an array of writables and passes it to a component ( RedOrBlueOrPurple.svelte ). The component iterates over the items. I want to pass an array of writables (rather than creating a single writable that holds the entire array of objects) because I want to add subscribe handlers on each item individually when things change inside an item. Otherwise, my subscribe handler would need to figure out which item was changed which seems like more work.

In this code below, the first button does effectively change the purple attribute because that call to update is followed by a refresh which resets the parent values. I would love to avoid this call if possible and just use the writable as the interface which both the parent and child understand and can use.

Also, I don't love that the template has to use a map on the each to pull out the item, get the value of the store (using the svelte internal call get_store_value ) but I don't know how I would use {#each items as $items...} otherwise (I cannot figure out how to use $item here). Is there a more elegant way of getting the value?

Also, and this seems really unfortunate, the fact that the console does not display errors when I call refresh and set a const variable seems like it breaks JS rules and still compiles. I know the Svelte is annotating this call underneath the hood to react to the change, but this seems wrong.

This is at this REPL here: https://svelte.dev/repl/84fbae4358494844a79a7f119b084f01?version=3.19.2

<script>
    import { writable } from 'svelte/store';
    import RedOrBlueOrPurple from './RedOrBlueOrPurple.svelte';

    const items = [];
    items.push( writable( { blue: true }));
    items.push( writable( { blue: false, red: true }));
    items.push( writable( { blue: true, red: true }));

const refresh = () => {
    items = items;
};

</script>

<RedOrBlueOrPurple {refresh} {items}/>

<script>
    import { get_store_value } from 'svelte/internal';
    export let items;
    export let refresh;

    const purple = (item, callRefresh) => {
        item.update( i => {
            i.purple = true;
            return i;
        });
        // We only call this for the first button, and if we don't, 
        // the items aren't updated, even though we do call update on
        // the store correctly. 
        if (callRefresh) {
            refresh();
        }
    };
</script>

{#each items.map( item => ({ item, value: get_store_value(item) })) as { item, value}, index }

<h1>
    Item : { index }
</h1>

<div>
RED: { value.red ? "Red" : "Not red"}
</div>
<div>
BLUE: { value.blue ? "Blue" : "Not blue"}
</div>

<div>
PURPLE: { value.purple ? "Purple" : "Not purple"}
</div>

<button on:click={ () => { purple(item, index === 0) } }>Change to purple</button>

{/each}

Answer 1

The screen update is only triggered, in your case, if svelte detects an assignment to items , which you use in the #each . Just updating any of the array's items is not enough. You could simply solve it like this:

const purple = (item, callRefresh) => {
    item.update( i => {
        i.purple = true;
        return i;
    });
    items = items;  // instead of using the callback, simple reassign items here
};

Answer 2

You can get away with this by using a derived store:

$: values = derived(items, x => x)

So your code would become:

App.svelte

<script>
    import { writable } from 'svelte/store';
    import RedOrBlueOrPurple from './RedOrBlueOrPurple.svelte';

    let items = [];
    items.push( writable( { blue: true }));
    items.push( writable( { blue: false, red: true }));
    items.push( writable( { blue: true, red: true }));

    const more = () => {
        items = [writable({}), ...items]
    }
</script>

<!-- another button to ensure new items are processed correctly -->
<button on:click={more}>More</button>

<RedOrBlueOrPurple {items}/>

RedOrBlueOrPurple.svelte

<script>
    import { derived } from 'svelte/store'

    export let items = [];

    $: values = derived(items, x => x)

    const purple = (item, callRefresh) => {
        item.update(i => ({ ...i, purple: true }))
    };
</script>

{#each $values as value, index}
    <h1>Item: {index}</h1>
    <pre>{JSON.stringify(value)}</pre>
    <button on:click={() => {purple(items[index])}}>Change to purple</button>
{/each}

Updated REPL

Note

Don't:

import { get_store_value } from 'svelte/internal';

There's a public API equivalent (see docs ):

import { get } from 'svelte/store'