从可写存储中筛选项目以显示在svelte中的好方法

Question

有更好的方法吗？

<script>
import recipeStore from '../../recipeStore';
export let id;  /* I got this id from the url param */
</script>
<div>
{#each $recipeStore as recipe }
{#if recipe.id == id}
<p>{recipe.name}</p>
{/if}
{/each}    
</div>

谢谢！

Answer 1

您可以在脚本标签中过滤您的商店数据：

<script>
import {counts} from "./store.js"
let id=0;
let mycounts
const filt=(value)=>{
mycounts=$counts.filter(count => count.id == id);
console.log("mycounts: ",mycounts)
}
$: filt(id)
</script>

您可以使用$:来观察变量的变化。在我的示例中，当id发生更改时，会调用filt(id)函数。

以下是REPL：https://svelte.dev/repl/77f92f3d3ca149dfa5475035cbbffeb5?version=3.29.0