您可以使用派生存储来完成此操作。这是一个小例子。
开设三间专卖店:term
将保存正在搜索的术语,items
将保存完整的项目列表,并且filtered
将是一个衍生商店 https://svelte.dev/docs#derived包含包含该术语的项目。每当term
or items
change.
// stores.js
import { writable, derived } from 'svelte/store';
export const term = writable('');
export const items = writable(['dog', 'cat', 'fish', 'iguana']);
export const filtered = derived(
[term, items],
([$term, $items]) => $items.filter(x => x.includes($term))
);
然后,您可以在您的应用程序中使用这些商店。您的搜索组件可以像这样设置要搜索的术语。
<!-- Search.svelte -->
<script>
import {term} from './stores.js';
let val = '';
$: term.set(val);
</script>
<label for="searchInput">Search</label>
<input bind:value={val} type="text" id="searchInput">
你打电话时term.set(val)
,派生存储将自动更新。您可以在应用程序的任何组件中使用此存储。
<!-- ListItems.svelte -->
<script>
import { filtered } from './stores.js';
</script>
<ul>
{#each $filtered as item}
<li>{item}</li>
{/each}
</ul>
您可以在中看到一个工作示例精简 REPL https://svelte.dev/repl/1a86d6f3df7b41f69f0fc93ba1ad0fd3?version=3.31.2.