Svelte – Auto Subscriptions

---

Alright guysss…. welcome back to our channel…. kembali lagi bersama kita di channel yang berbahagia ini… kwkwkwkw oke karena Sudah dapat momentumnya kwkwkw kita lanjut aja yakan ke Svelte… jadi terkahir kali kita sudah berhasil mengedit store ya namun pada tutor tersebut masih harus manual subscribe/unsubsribe… jadi untuk kali ini sebenarnya sangat simple yagesya… karena hanya cukup menambahkan $ saja kedalam variable tersebut sehingga svelte akan langsung auto subscribe kedalam global variablenya… Okay walau begitu simple tapi akan tetap saya paparkan ya supaya ada perbandingannya terlihat… okay check it out…

Pertama edit file stores.js nya..

import { writable } from 'svelte/store';

export const countWritable = writable(0);
export const countAutoSubscriptions = writable(0);

Kemudian kita buat auto_subscriptions/Resetter.svelte

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

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

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

dan buat auto_subscriptions/Incrementer.svelte

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

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

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

dan buat auto_subscriptions/Decrementer.svelte

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

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

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

dan terakhir kita import saja langsung ke App.svelte

<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/>
	<h1>The count is {$countAutoSubscriptions}</h1>
	<IncrementerAutoSubscriptions/>
	<DecrementerAutoSubscriptions/>
	<ResetterAutoSubscriptions/>

</main>

dan hasilnya sama yagesss…

Okay saya rasa cukup dulu… lanjut lagi di post selanjutnya yaa … link github ada disini…. cyaaaaa