Stores

นักพัฒนา React มักใช้ Context + useReducer, Redux หรือ Zustand เพื่อจัดการ shared state ข้ามคอมโพเนนต์ Svelte มี stores ในตัว: writable (อ่านและเขียนได้), readable (อ่านได้อย่างเดียว), และ derived (คำนวณค่าจาก stores อื่น) ใน markup ให้ใส่เครื่องหมาย $ นำหน้าชื่อ store เพื่อ auto-subscribe — Svelte จะ subscribe และ unsubscribe ให้อัตโนมัติ

writable store เทียบกับ Zustand

// store.js (Zustand)
import { create } from 'zustand';

export const useCountStore = create(set => ({
  count: 0,
  increment: () => set(s => ({ count: s.count + 1 })),
  reset: () => set({ count: 0 }),
}));

// Component.jsx
function Counter() {
  const { count, increment } = useCountStore();
  return <button onClick={increment}>Count: {count}</button>;
}

<!-- store.js -->
import { writable } from 'svelte/store';
export const count = writable(0);

<!-- Counter.svelte -->
<script>
  import { count } from './store.js';
</script>

<button onclick={() => count.update(n => n + 1)}>
  Count: {$count}
</button>

derived store เทียบกับ useSelector

// Zustand selector
const double = useCountStore(s => s.count * 2);

<script>
  import { derived } from 'svelte/store';
  import { count } from './store.js';

  const doubleCount = derived(count, $count => $count * 2);
</script>

<p>Double: {$doubleCount}</p>

ลองเล่น: writable count store + derived doubleCount

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  import { writable, derived } from 'svelte/store';

  const count = writable(0);
  const doubleCount = derived(count, $count => $count * 2);
</script>

<button onclick={() => count.update(n => n - 1)}>-</button>
<strong>{$count}</strong>
<button onclick={() => count.update(n => n + 1)}>+</button>
<button onclick={() => count.set(0)}>Reset</button>

<p>Double: {$doubleCount}</p>

<style>
  button { margin: 0 0.25rem; padding: 0.3rem 0.7rem; }
  strong { font-size: 1.5rem; margin: 0 0.5rem; }
</style>

🔀 Zustand / Context vs Svelte stores

Zustand/Redux ต้องติดตั้ง package เพิ่ม — Svelte stores มาพร้อมกับ svelte/store เลย
Zustand ใช้ hook useCountStore() ใน component — Svelte ใช้ $storeName เพื่อ auto-subscribe
derived ใน Svelte ทำงานเหมือน selector ของ Zustand แต่เป็น reactive store ในตัวเอง
writable มี .set(val), .update(fn), และ .subscribe(fn) — API เรียบง่ายและสม่ำเสมอ
readable เหมาะกับ stores ที่อัปเดตจากแหล่งภายนอก เช่น timer หรือ WebSocket
เครื่องหมาย $ นำหน้าใน markup จะ subscribe อัตโนมัติและ cleanup เมื่อ component ถูก destroy