0

我有一个父模板 (App.svelte)，它创建一个可写数组并将其传递给一个组件 ( RedOrBlueOrPurple.svelte)。该组件对项目进行迭代。我想传递一个可写数组（而不是创建一个包含整个对象数组的单个可写数组），因为我想subscribe在项目内部发生变化时分别在每个项目上添加处理程序。否则，我的订阅处理程序将需要弄清楚哪个项目已更改，这似乎需要更多工作。

在下面的代码中，第一个按钮确实有效地更改了紫色属性，因为该调用update后面跟着refresh重置父值的 a。如果可能的话，我很想避免这个调用，只使用可写作为父母和孩子都理解和可以使用的接口。

另外，我不喜欢模板必须map在 each 上使用 a 来取出项目，获取商店的价值（使用 svelte 内部调用get_store_value），但我不知道我将如何使用{#each items as $items...}（我不能弄清楚如何在$item这里使用）。有没有更优雅的获取价值的方法？

此外，这似乎真的很不幸，当我调用刷新并设置变量时控制台不显示错误的事实const似乎违反了 JS 规则并且仍然可以编译。我知道 Svelte 在底层注释这个调用以对变化做出反应，但这似乎是错误的。

这是这里的 REPL：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}
4

2 回答 2

3

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
};
于 2020-03-07T06:58:26.667 回答
1

您可以通过使用派生商店来解决这个问题：

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

所以你的代码会变成：

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}

更新了 REPL

笔记

不：

import { get_store_value } from 'svelte/internal';

有一个等效的公共 API（请参阅docs）：

import { get } from 'svelte/store'
于 2020-03-10T22:46:00.890 回答