Svelte Store 是Svelte框架中用于状态管理的一个简洁而强大的特性。它允许开发者创建可响应式的数据存储，使得组件可以订阅这些数据的变化并自动更新。

创建Store

基本Store: 使用writable, readable, 或 derived 函数创建不同类型的Store。

• writable: 可读可写的Store，适合应用的状态数据。

 import { 
    writable } from 'svelte/store'; const count = writable(0); 

• readable: 只读的Store，接收一个getter函数和一个可选的setter，适用于计算属性或从服务器获取的数据。

 import { 
    readable } from 'svelte/store'; const user = readable(null, (set) => { 
    fetch('/api/user') .then((response) => response.json()) .then(set); }); 

• derived: 从其他Stores派生出新的Store，当依赖的数据变化时自动更新。

 import { 
    derived, writable } from 'svelte/store'; const a = writable(1); const b = writable(2); const sum = derived([a, b], ([x, y]) => x + y); 

订阅Store

在组件中通过$前缀订阅Store，当Store的值发生变化时，组件会自动重新渲染。

<script> import { 
      count } from './store.js'; </script> <p>The count is {$count}</p> 

更新Store

对于writable类型的Store，可以通过调用其.set()方法或直接赋值来更新值。

// 使用.set()方法 count.set(1); // 或者直接赋值（仅限于组件内部） $count = 1; 

解绑Store

为了避免内存泄漏，当组件不再需要监听Store时，应解绑订阅。这通常在组件的onDestroy生命周期钩子中完成。

<script> import { 
      onMount, onDestroy } from 'svelte'; import { 
      count } from './store.js'; let unsubscribe; onMount(() => { 
      unsubscribe = count.subscribe(value => { 
      // 处理更新逻辑 }); }); onDestroy(() => { 
      unsubscribe(); }); </script> 

异步更新与防抖/节流

Svelte Store本身不直接提供防抖(debounce)或节流(throttle)功能，但可以在更新Store之前应用这些策略，以优化性能和用户体验。

更新通知与副作用

更新回调: Store的.subscribe方法接受一个可选的第二个参数作为取消订阅的函数，并返回该函数。同时，这个回调也可以用来执行副作用，比如日志记录或触发其他操作。

 count.subscribe(value => { 
    console.log(`Count updated to ${ 
     value}`); }); 

结合Actions使用

Svelte Actions允许将行为附加到DOM素上，结合Stores，可以在状态改变时执行DOM操作或添加特定的交互效果。

Context与Store的结合

虽然Svelte Store可以全局访问，但在大型应用中，过度使用全局Store可能导致状态难以管理。结合Svelte的getContext和setContext API，可以在组件树的特定层级注入Store，实现更细粒度的状态管理。

TypeScript支持

Svelte Stores与TypeScript集成良好，可以为Store指定类型，提高开发效率和代码质量。

import { 
    writable } from 'svelte/store'; interface User { 
    name: string; age: number; } const user: Writable<User> = writable({ 
    name: 'John Doe', age: 30 }); 

Store的模块化和重用

鼓励将Store定义在单独的模块中，这样可以提高代码的可维护性和重用性。每个Store负责管理特定领域的状态，有助于保持代码结构清晰。

Store的组合与解耦

为了保持代码的模块化和可维护性，开发者经常需要将多个Store组合起来以实现更复杂的功能，或者从现有的Store中解耦出新的状态逻辑。这可以通过创建derived Store或者自定义Store来实现。

• Derived Stores for 组合: 利用derived Store可以基于现有Store计算出新的状态，而无需修改原始数据源，保持状态管理的纯净性和灵活性。

 // 假设我们有两个独立的计数器 const counterA = writable(0); const counterB = writable(0); // 创建一个派生Store来计算总和 const total = derived([counterA, counterB], ([$a, $b]) => $a + $b); 

• 自定义Store逻辑: 有时需要更复杂的逻辑来管理状态，可以创建自定义Store类，封装订阅、更新和衍生逻辑。

 class CustomStore { 
    constructor(initialValue) { 
    this.value = initialValue; this.listeners = new Set(); } subscribe(run) { 
    const unsubscribe = () => this.listeners.delete(run); this.listeners.add(run); run(this.value); return unsubscribe; } set(newValue) { 
    if (newValue !== this.value) { 
    this.value = newValue; for (const listener of this.listeners) { 
    listener(newValue); } } } } 

状态持久化

虽然Svelte Store本身不直接支持状态持久化，但可以通过结合外部库（如svelte-localstorage-store）轻松实现。这使得应用能够在用户刷新页面或关闭浏览器后仍然记住状态。

测试Store

由于Store是纯逻辑组件，它们非常适合单测试。可以单独测试Store的订阅、更新逻辑，以及衍生Store的计算是否正确。

• 订阅测试: 确保订阅者在Store更新时被正确通知。
• 更新测试: 验证Store的值在调用.set()后是否正确更改。
• 衍生逻辑测试: 对于derived Store，检查基于输入Store的变化是否正确计算出预期输出。

DevTools支持

Svelte DevTools提供了对Store的可视化支持，帮助开发者在运行时监控Store的状态变化，这对于调试和理解应用状态流转非常有帮助。