svelte-3 - 过滤可写商店中的项目以显示在苗条中的好方法？

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