Svelte 状态管理

所有的状态数据都可以通过在前面加上 $ 直接订阅获取

可编辑数据

// store.js
import { writable } from "svelte/store";

export const count = writable(0);

<!-- app.svelte -->
<script>
  import { count } from "./store.js";
  import Home from "./home.svelte";
  let _count;
  count.subscribe((res) => {
    _count = res;
  });
</script>

<p>count is: {_count}</p>
<!-- 按照前面说的，可以通过订阅的方式，也可以通过 $ 直接订阅获取 -->
<p>count is: {$count}</p>

<Home />

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

<button on:click={() => count.update((n) => n + 1)}>addCount</button>
<button on:click={() => count.update((n) => n - 1)}>deleteCount</button>

只读数据

import { readable } from "svelte/store";

export const timer = readable(new Date(), (set) => {
  let interval = setInterval(() => {
    set(new Date());
  }, 1000);
  return () => {
    clearInterval(interval);
  };
});

<!-- app.svelte -->
<script>
  import { timer } from "./store.js";
</script>

<p>{$timer}</p>

自定义 store（官方自带的 store）

// store.js
import { writable } from "svelte/store";

function createCount() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    add: () => update((n) => n + 1),
    delete: () => update((n) => n - 1),
    reset: () => set(0),
  };
}

export const count = createCount(0);

<!-- app.svelte -->
<script>
  import { count } from "./store.js";
  import Home from "./home.svelte";
</script>

<p>{$count}</p>

<Home />

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

<button on:click={() => count.add()}>addCount</button>
<button on:click={() => count.delete()}>deleteCount</button>

自定义 store（Rxjs）

// store.js
import { BehaviorSubject } from "rxjs";

let count = new BehaviorSubject(0);

export { count };

<!-- app.svelte -->
<script>
  import { count } from "./store.js";
  import Home from "./home.svelte";
</script>

<p>{$count}</p>

<Home />

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

<button on:click={() => count.next($count + 1)}>addCount</button>
<button on:click={() => count.next($count - 1)}>deleteCount</button>