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确实是一个函数，但是returns是一个store。你会像这样使用它：

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

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

如果您希望此索引也具有反应性，您可以反应性地生成商店：

$: current = derivedValue(index)

并仍将其用作常规商店：$current

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

Svelte add param to derived state and keep its reactivity

svelte

svelte-store

svelte-3