どのようなカスタムストアですか?

どのようなカスタムストアですか?
通常、ストア(書き込み可能)には、次の3つのメソッドがあります.

subscribe ()

set ()

update ()
subscribe ()メソッドを実装した限り、JavaScriptオブジェクトはストアです.
ストアは、時間をかけて変更できる反応データを提供します.我々は更新を制限する店を作成する場合はどうですか?それは大きなウェブ/モバイルアプリケーションで意味をなします.そこで、我々はストア変数を上書きするために他の構成要素に規制を置きました.つまり、ストア変数のみをストア内で更新できます.
カスタムストアを作成するには、次の手順に従います

関数

において書き込み可能なストアを作成する

オブジェクトの添字()関数を返します.

我々はショッピングカートを持っていると仮定し、そこからアイテムを追加または削除する必要があります.この例では、カートのカウントを増減するだけです.我々は、単純なプロトタイプを起動し、今後の記事でより複雑に移動します.shoppingcart.jsディレクトリの下に新しいファイルsrcを作成します.

import { writable } from 'svelte/store';

function addOrRemoveCartItems() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        add: () => { update(n => n + 1) },
        // Shopping Cart doesnot contain Negative Items
        remove: () => { update(n => n <= 0 ? 0 : n - 1 ) },
        resetCart: () => { set(0) }
    };
}

export const items = addOrRemoveCartItems();

そして、App.svelte

<script>

    import { items } from "./shoppingcart";

</script>

<main>
    <p> Custom Store Example. </p>

    <h1> Total Cart Items { $items }</h1>

    <button on:click={ items.add }> Add to Cart </button>
    <button on:click={ items.remove }> Remove from Cart </button>
    <button on:click={ items.resetCart }> Remove All Items </button>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

ページをリフレッシュしてください

この記事では、カスタムストアについて学びます.今度の記事でお会いしましょう.