どのようなカスタムストアですか?
7676 ワード
どのようなカスタムストアですか?
通常、ストア(書き込み可能)には、次の3つのメソッドがあります.
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>
ページをリフレッシュしてくださいこの記事では、カスタムストアについて学びます.今度の記事でお会いしましょう.
Reference
この問題について(どのようなカスタムストアですか?), 我々は、より多くの情報をここで見つけました https://dev.to/akuks/what-are-custom-stores-15kiテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol