Svelte Store：状态管理的Svelte方式

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

创建Store

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

  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的值发生变化时，组件会自动重新渲染。

html 复制代码

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

<p>The count is {$count}</p>

更新Store

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

javascript 复制代码

// 使用.set()方法
count.set(1);

// 或者直接赋值（仅限于组件内部）
$count = 1;

解绑Store

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

html 复制代码

<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方法接受一个可选的第二个参数作为取消订阅的函数，并返回该函数。同时，这个回调也可以用来执行副作用，比如日志记录或触发其他操作。

javascript 复制代码

  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指定类型，提高开发效率和代码质量。

typescript 复制代码

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计算出新的状态，而无需修改原始数据源，保持状态管理的纯净性和灵活性。

javascript 复制代码

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

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

javascript 复制代码

  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的状态变化，这对于调试和理解应用状态流转非常有帮助。