svelte_state.md

svelte_state.md (2184B)
      1 # Svelte State Management
      2 
      3 ## Svelte 4 Writable Store
      4 
      5 ```ts
      6 // fooStore.ts
      7 import { type Writable, writable } from "svelte/store";
      8 
      9 function createFoo() {
     10   const { subscribe, set, update }: Writable<number> = writable(0);
     11   return {
     12     subscribe,
     13     set: (value: number) => set(value),
     14     add: (value: number) => update((x: number) => x + value),
     15     triple: () => update((x: number) => x * 3),
     16     clear: () => set(0),
     17   };
     18 }
     19 export const foo = createFoo();
     20 ```
     21 
     22 Derived store:
     23 
     24 ```ts
     25 // fooStore.ts
     26 import { derived, writable } from "svelte/store";
     27 
     28 export const bar = writable(1);
     29 export const baz = writable(2);
     30 export const foo = derived(
     31   [bar, baz],
     32   ([$bar, $baz]) => Math.min($bar, $baz) / 2,
     33 );
     34 ```
     35 
     36 ## Svelte 5 Rune Store
     37 
     38 ```ts
     39 // foo.svelte.ts (must be placed inside a *.svelte.ts file)
     40 function createFoo(initialCount = 0) {
     41   let foo = $state(initialCount);
     42 
     43   return {
     44     get foo() {
     45       return foo;
     46     },
     47     set foo(value) {
     48       foo = value;
     49     },
     50     add(value) {
     51       foo += value;
     52     },
     53     triple() {
     54       foo *= 3;
     55     },
     56   };
     57 }
     58 export const foo = createFoo();
     59 ```
     60 
     61 Or class if you prefer:
     62 
     63 ```ts
     64 // foo.svelte.ts
     65 export class Foo {
     66   foo = $state(0);
     67 
     68   constructor(initialCount = 0) {
     69     this.foo = initialCount;
     70   }
     71 
     72   add(value) {
     73     this.foo += value;
     74   }
     75 
     76   triple() {
     77     this.foo *= 3;
     78   }
     79 }
     80 
     81 export const foo = new Foo();
     82 ```
     83 
     84 Class doesn't need get/set method, just read/write it directly:
     85 
     86 ```ts
     87 // In a component:
     88 // Reading:
     89 console.log(foo.foo);
     90 // Writing (triggers UI updates automatically):
     91 foo.foo = 10;
     92 ```
     93 
     94 Derived rune:
     95 
     96 ```ts
     97 // foo.svelte.ts (must be placed inside a *.svelte.ts file)
     98 function createFoo(initialBar = 1, initialBaz = 2) {
     99   let bar = $state(initialBar);
    100   let baz = $state(initialBaz);
    101   let foo = $derived(Math.min(bar, baz) / 2);
    102 
    103   return {
    104     get bar() {
    105       return bar;
    106     },
    107     set bar(value) {
    108       bar = value;
    109     },
    110     get baz() {
    111       return baz;
    112     },
    113     set baz(value) {
    114       baz = value;
    115     },
    116     get foo() {
    117       return foo;
    118     },
    119   };
    120 }
    121 export const foo = createFoo();
    122 ```
    123 
    124 [Different Ways To Share State In Svelte 5](https://joyofcode.xyz/how-to-share-state-in-svelte-5)
	notes
	Log \| Files \| Refs \| README
notes
