时间戳

首页 > 解决方案 > Svelte 将参数添加到派生状态并保持其反应性

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

问题描述

在这个例子中，$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]);

我想创建一个反应式吸气剂，如下所示：

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

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

标签： sveltesvelte-3svelte-store

解决方案

derivedValue确实是一个函数，但它返回一个商店。你会像这样使用它：

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

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

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

$: current = derivedValue(index)

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

推荐阅读