Svelte Store：状态管理的Svelte方式

天涯学馆

于 2024-06-24 22:13:58 发布

阅读量1.3k

点赞数 51

分类专栏： Web大前端文章标签： javascript 前端 Svelte Svelte Store

本文链接：https://blog.csdn.net/A1215383843/article/details/139940040

版权

Web大前端专栏收录该内容

105 篇文章 3 订阅

订阅专栏

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);
        }
      }
    }
  }