Svelte – Writable Stores

1 min read


Alright guysss… welcome back to our channel.. kita lanjut lagi ya setelah hampir 2 minggu saya ga publish hasil tulisan tentang Svelte… karena ada kesibukan juga di RL… oke tanpa basa-basi langsung aja

Pertama buat file stores/stores/stores.js

import { writable } from 'svelte/store';

export const countWritable = writable(0);

Kemudian kita buat file stores/Decrementer.svelte

<script>
	import { countWritable } from './stores/stores.js';

	function decrement() {
		countWritable.update(n => n - 1);
	}
</script>

<button on:click={decrement}>
	-
</button>

Kemudian kita buat file stores/Incrementer.svelte

<script>
	import { countWritable } from './stores/stores.js';

	function increment() {
		countWritable.update(n => n + 1);
	}
</script>

<button on:click={increment}>
	+
</button>

Kemudian kita buat file stores/Resetter.svelte

<script>
	import { countWritable } from './stores/stores.js';

	function reset() {
		countWritable.set(0);
	}
</script>

<button on:click={reset}>
	reset
</button>

dan terakhir kita import pada App.svelte kita sehingga menjadi seperti ini..

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Counter />
	<Toggle />
	<Img />
	<String />
	<Statement />
	<Condition />
	<Nested answer={42}/>
	<Nested/>
	<Info {...pkg}/>
	<IfLogin />
	<Comparison />
	<EachYoutube />
	<KeyEachThing />
	<GenerateNumber />
	<MouseMove />
	<MouseMoveInlineHandler />
	<EventModifier />
	<AlertCompEvent />
	<AlertEventForwarding />
	<CustomButtonComp />
	<TextInput />
	<NumericInput />
	<CheckboxInputs />
	<GroupInputs />
	<TextareaInputs />
	<FileInput />
	<SelectBindings />
	<SelectMultiple />
	<EachBlockBindings />
	<MediaElements />
	<Dimensions />
	<BindThisCanvas />
	<ComponentBindings />
	<OnMount />
	<OnDestroyIntervals />
	<BeforeAndAfterUpdate />
	<Tick />
	<h1>The count is {countValue}</h1>
	<Incrementer/>
	<Decrementer/>
	<Resetter/>

</main>

dan hasilnya akan seperti ini ….

oke berhasil ya… sampai jumpa di Post selanjutnya yaaa…cyaaa

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *