Coding With Rich Harris 9

---

Hello guys.. welcome back to our channel…

Store With Explanations

pertama kita buat file baru bernama store.js

import { writable } from "svelte/store"

export const count = writable(0);

ini tampak kita membuat global variable untuk menyimpan data count.. ini mirip saat kita menggunakan state management seperti halnya redux.. namun svelte dapat menyajikannya tanpa harus menginstall lagi state management…

App.svelte

<script>
	import { onDestroy } from "svelte";
	import { count } from "./store.js"
	import Button from "./Button.svelte"
	export let name;

	const unsubscribe = count.subscribe(value => {
		console.log(value)
	})
    
	const increment = () => {
		count.update(n => n + 1);
	};

	onDestroy(() => unsubscribe())
</script>

<main>
	<h1>Hi {name}! {$count}</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<form>
		<input type="text" bind:value={name} />
	</form>
	<Button count={$count} handleClick={increment} />
	<!-- <Button count={0} /> -->
</main>

jadi penjelasan diatas kita menggunakan metode $ pada count yakni dalam melakukan subsribe pada boilerplate yang sudah dibuat oleh founder.. jadi kita tidak perlu lagi code panjang lebar untuk menggunakan dan memanipulasi value dari count tersebut… ini sama halnya di React JS itu ada model class dan functional.. Dan ini mirip ke functional component dari React JS itu… namun jelas ini lebih less code dibanding React… lebih simple dan ringan…

result

okay link github ada disini … cyaaa….