Svelte添加参数到派生状态并保持其反应性

Question

在本例中，$derivedValue是活性的;如果myArray在索引3处改变，它也会自动改变。

App.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]);

我想创建一个响应式getter，它看起来像这样:

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

当然，在这种情况下，derivedValue是一个函数，不再是可下标。是否有一种方法来创建这样一个可订阅的反应衍生值与参数?

Answer 1

derivedValue将确实是一个函数，但它返回一个存储。你可以这样使用它:

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

如果您希望这个索引也是响应性的，您可以响应性地生成存储:

$: current = derivedValue(index)

并仍然将其用作常规存储:$current