List 如何更改动态生成的项目列表的单个状态？

我对苗条和前端比较陌生，我正在制作一个产品目录的小演示。该应用程序执行一个api请求，获取一些json数据，生成一个包含产品的网格，并将一些数据填充到每个产品中。我想知道如何改变每件商品的数量。每次单击加号按钮时，只有该按钮所属产品的数量应该更改。例如，当单击第一个项目的加号按钮时，只会减少其自身的数量，而不会减少所有其他产品的数量。如果该产品数量为零，则该按钮将变为非活动状态。代码如下：

    import { onMount } from 'svelte';

    let products = [];
    let total = 0;
    let quantity = 5;

    onMount(async () => {
        const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
        products = await res.json();
    });

    function increment(price){
        total= total + price;
        console.log(total);
        quantity = quantity - 1;
    } 

    function decrement(price){
        total= total - price;
        console.log(total);
        quantity = quantity + 1;
    } 
</script>

<h1>Photo album</h1>

<div class="photos">
    {#each products as product}
        <figure>
            <img src={product.image_link} alt={product.name}>
            <figcaption>{product.name}</figcaption>
            <small>{product.price}<small/>
                <h1>Quantity: {quantity}</h1>
                <button on:click={increment(parseFloat(product.price))}>+</button>
                <button on:click={decrement(parseFloat(product.price))}>-</button>
        </figure>
    {:else}
        <p>loading...</p>
    {/each}
    
</div>
<div>
    <h1>Total {total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

    figure, img {
        width: 100%;
        margin: 0;
    }
</style> ```

从'svelte'导入{onMount}；
让产品=[]；
设total=0；
设数量=5；
onMount（异步（）=>{
const res=等待取数(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
products=wait res.json（）；
});
功能增量（价格）{
总计=总计+价格；
控制台日志（总计）；
数量=数量-1；
} 
功能减量（价格）{
总价=总价；
控制台日志（总计）；
数量=数量+1；
} 
相册
{#每个产品都是产品}
{product.name}
{产品价格}
数量：{Quantity}
+
-
{:else}
加载

{/每个}
总计{Total}
.照片{
宽度：100%；
显示：网格；
网格模板列：重复（5，1fr）；
栅隙：8px；
}
图，img{
宽度：100%；
保证金：0；
}
```

尝试以下操作

App.svelte
<script>
    import { onMount } from 'svelte';
    import Product from './Product.svelte'
    import { total } from './stores.js'

  let products = [];

  onMount(async () => {
    const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
    products = await res.json();
        products.forEach(function (element) {
        element.quantity = 5;
        });
    });
        
</script>

<h1>Photo album</h1>
    {#if products && products.length}
        <div class="photos">
        {#each products as product}
                <Product product={product} />
            {/each}
    </div>    
  {:else}
    <p>loading...</p>
  {/if}
   
<div>
    <h1>Total {$total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

   
</style> 

------Product.svelte----
<script>
    import { total } from './stores.js';
    export let product;

    function increment(price) {
        $total = $total + price;
        console.log($total);
        product.quantity = product.quantity - 1;
    }

    function decrement(price) {
        $total = $total - price;
        console.log($total);
        product.quantity = product.quantity + 1;
    }
</script>

<figure>
    <figcaption>{product.name}</figcaption>
    <img src={product.image_link} alt={product.name} />
    <small
        >{product.price}<small />
        <h1>Quantity: {product.quantity}</h1>
        <button on:click={increment(parseFloat(product.price))}>+</button>
        <button on:click={decrement(parseFloat(product.price))}>-</button>
    </small>
</figure>

<style>
    figure,
    img {
        width: 100%;
        margin: 0;
    }
</style>

----stores.js----
import {writable} from 'svelte/store'

export const total = writable(0)