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