Svelte 将参数添加到派生状态并保持其 react 性

Question

在此示例中，$衍生值是响应式的；如果 myArray 在索引 3 处发生更改，它也会自动更改。

应用程序.svelte

<script>
    import { myArray, derivedValue } from './store';
</script>

<h1>{$myArray}</h1>
<h1>{$derivedValue}</h1>

store.js

import {derived, writable} from 'svelte/store';

export const myArray = writable([6, 7, 8, 9, 10]);
export const derivedValue = derived(myArray, value => value[3]);

我想创建一个响应式(Reactive) setter/getter ，如下所示:

export const derivedValue = index => derived(myArray, value => value[index]);

当然，在这种情况下，衍生值是一个函数，并且不再可订阅。有没有办法用参数创建这样一个可订阅的 react 派生值？

Answer 1

衍生值确实是一个函数，但它返回一个存储。你可以像这样使用它:

<script>
    import { myArray, derivedValue } from './store';
    const first = derivedValue(0);
</script>

<h1>{$myArray}</h1>
<h1>{$first}</h1>

如果您也希望该索引具有反应性，您可以 react 性地生成存储:

$: current = derivedValue(index)

仍然将其用作常规商店:$current