Svelte 组件状态管理：使用上下文和存储

在前端开发中，状态管理是一个至关重要的环节。Svelte 作为一款优秀的前端框架，为开发者提供了多种有效的状态管理方式，其中上下文（Context）和存储（Store）是两种常用且强大的工具。

1. Svelte 上下文（Context）

Svelte 的上下文机制允许在组件树中传递数据，而无需通过繁琐的 props 层层传递。这在处理多层嵌套组件间的数据共享时非常有用。

创建和使用上下文

要创建上下文，Svelte 提供了 setContext 和 getContext 函数。假设我们有一个父组件 Parent.svelte，它要向子组件传递一些数据：

<script>
  import { setContext } from'svelte';
  import Child from './Child.svelte';

  const sharedData = {
    message: '这是共享的数据',
    value: 42
  };

  setContext('sharedContext', sharedData);
</script>

<Child />

在子组件 Child.svelte 中，我们可以通过 getContext 获取这个上下文数据：

<script>
  import { getContext } from'svelte';

  const sharedData = getContext('sharedContext');
</script>

<p>{sharedData.message}</p>
<p>{sharedData.value}</p>

这里，setContext 的第一个参数是上下文的唯一标识符（在这个例子中是 'sharedContext'），第二个参数是要共享的数据。子组件通过相同的标识符使用 getContext 来获取数据。

上下文的作用域

上下文的作用域是从设置它的组件开始，到它的所有后代组件。这意味着，只要在组件树中某个组件设置了上下文，它的子组件、孙组件等都可以访问到这个上下文。例如，如果 Child.svelte 又有自己的子组件 GrandChild.svelte，GrandChild.svelte 同样可以使用 getContext('sharedContext') 来获取共享数据。
上下文的更新

虽然上下文本身是一种单向的数据传递方式，但我们可以通过传递一个可更新的对象来实现数据的动态更新。例如，我们可以将 sharedData 改为一个可写的对象，并在需要时更新它：

<script>
  import { setContext } from'svelte';
  import Child from './Child.svelte';

  const sharedData = {
    message: '这是共享的数据',
    value: 42,
    updateValue: function (newValue) {
      this.value = newValue;
    }
  };

  setContext('sharedContext', sharedData);
</script>

<Child />

在子组件 Child.svelte 中，我们可以调用 sharedData.updateValue 来更新数据：

<script>
  import { getContext } from'svelte';

  const sharedData = getContext('sharedContext');

  function updateValue() {
    sharedData.updateValue(sharedData.value + 1);
  }
</script>

<button on:click={updateValue}>更新值</button>
<p>{sharedData.message}</p>
<p>{sharedData.value}</p>

这样，通过在上下文中传递可更新的函数，我们实现了子组件对共享数据的更新。

2. Svelte 存储（Store）

Svelte 的存储是一种更通用的状态管理方式，它可以在不同的组件之间共享状态，并且支持响应式更新。

创建存储

要创建一个存储，我们可以使用 writable 函数。例如，创建一个简单的计数器存储：

import { writable } from'svelte/store';

const counter = writable(0);
export default counter;

这里，writable 函数接受一个初始值，并返回一个存储对象。这个存储对象有 subscribe、set 和 update 方法。

订阅存储

在组件中使用存储时，我们需要订阅它以获取最新的值。例如，在 App.svelte 中：

<script>
  import counter from './counterStore.js';
  let count;
  const unsubscribe = counter.subscribe((value) => {
    count = value;
  });
</script>

<p>计数器: {count}</p>

subscribe 方法接受一个回调函数，每当存储的值发生变化时，这个回调函数就会被调用。subscribe 方法返回一个取消订阅的函数，在组件销毁时可以调用它来取消订阅，避免内存泄漏。例如：

<script>
  import counter from './counterStore.js';
  let count;
  const unsubscribe = counter.subscribe((value) => {
    count = value;
  });

  $: onDestroy(() => {
    unsubscribe();
  });
</script>

<p>计数器: {count}</p>

这里使用了 Svelte 的 onDestroy 生命周期函数来在组件销毁时取消订阅。

更新存储

我们可以通过 set 或 update 方法来更新存储的值。set 方法直接设置一个新的值，而 update 方法接受一个函数，这个函数接受当前值并返回一个新值。例如：

<script>
  import counter from './counterStore.js';
  let count;
  const unsubscribe = counter.subscribe((value) => {
    count = value;
  });

  function increment() {
    counter.update((n) => n + 1);
  }

  function setToTen() {
    counter.set(10);
  }
</script>

<button on:click={increment}>增加</button>
<button on:click={setToTen}>设置为 10</button>
<p>计数器: {count}</p>

在这个例子中，increment 函数使用 update 方法将计数器的值加 1，setToTen 函数使用 set 方法将计数器的值设置为 10。

只读存储

有时候我们需要创建一个只读的存储，即只能通过订阅获取值，而不能直接更新。我们可以使用 readable 函数来创建只读存储。例如：

import { readable } from'svelte/store';

const time = readable(new Date(), (set) => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

export default time;

这里，readable 函数接受一个初始值和一个可选的启动函数。启动函数接受一个 set 函数，用于设置存储的值。在这个例子中，我们通过 setInterval 每秒更新一次时间。readable 函数返回的存储对象只有 subscribe 方法，没有 set 和 update 方法，确保了存储的只读性。

在组件中使用这个只读存储：

<script>
  import time from './timeStore.js';
  let currentTime;
  const unsubscribe = time.subscribe((value) => {
    currentTime = value;
  });
</script>

<p>当前时间: {currentTime}</p>

3. 上下文与存储的结合使用

在实际项目中，我们常常会结合上下文和存储来实现更复杂的状态管理。例如，我们有一个应用，其中多个组件需要访问用户的登录状态。我们可以使用存储来管理登录状态，然后通过上下文将存储传递给需要的组件。

首先，创建一个登录状态存储 authStore.js：

import { writable } from'svelte/store';

const isLoggedIn = writable(false);

export default isLoggedIn;

然后，在父组件 App.svelte 中设置上下文，将登录状态存储传递下去：

<script>
  import { setContext } from'svelte';
  import isLoggedIn from './authStore.js';
  import Navbar from './Navbar.svelte';
  import MainContent from './MainContent.svelte';

  setContext('authContext', isLoggedIn);
</script>

<Navbar />
<MainContent />

在 Navbar.svelte 组件中，通过上下文获取登录状态存储并订阅它：

<script>
  import { getContext } from'svelte';
  const isLoggedIn = getContext('authContext');
  let loggedIn;
  const unsubscribe = isLoggedIn.subscribe((value) => {
    loggedIn = value;
  });

  function login() {
    isLoggedIn.set(true);
  }

  function logout() {
    isLoggedIn.set(false);
  }
</script>

{#if loggedIn}
  <button on:click={logout}>注销</button>
{:else}
  <button on:click={login}>登录</button>
{/if}

在 MainContent.svelte 组件中，同样通过上下文获取登录状态存储并根据状态显示不同内容：

<script>
  import { getContext } from'svelte';
  const isLoggedIn = getContext('authContext');
  let loggedIn;
  const unsubscribe = isLoggedIn.subscribe((value) => {
    loggedIn = value;
  });
</script>

{#if loggedIn}
  <p>欢迎，用户已登录</p>
{:else}
  <p>请先登录</p>
{/if}

通过这种方式，我们既利用了存储的响应式和通用状态管理能力，又借助上下文实现了在组件树中便捷地传递状态。

4. 上下文和存储的优缺点

上下文的优点
- 便捷的数据传递：对于多层嵌套组件间的数据共享，上下文避免了通过 props 层层传递的繁琐，使代码更简洁。
- 明确的作用域：上下文的作用域明确，从设置它的组件到其后代组件，易于理解和维护。
- 缺点
- 单向传递：上下文主要是单向的数据传递，虽然可以通过传递可更新对象来实现更新，但不够直观，在复杂场景下可能导致代码难以理解。
- 难以调试：由于上下文数据在组件树中传递，当数据出现问题时，追踪数据来源和变化可能相对困难。
存储的优点
- 通用的状态管理：存储可以在不同组件间共享状态，无论组件在组件树中的位置如何，非常灵活。
- 响应式更新：存储具有内置的响应式机制，当状态变化时，订阅的组件会自动更新，减少手动操作 DOM 的代码。
- 缺点
- 过度使用可能导致混乱：如果在项目中过度使用存储，可能会使状态管理变得复杂，难以追踪状态的变化和依赖关系。
- 初始设置较复杂：相比简单的变量声明，创建和使用存储需要更多的代码，例如订阅和取消订阅操作。

5. 实际应用场景

上下文的应用场景
- 组件库开发：在开发组件库时，常常需要在组件间共享一些配置信息，例如主题、语言设置等。通过上下文可以方便地将这些信息传递给需要的组件，而不需要用户在每个组件上手动设置 props。
- 特定组件树内的数据共享：当某个特定组件树内的组件需要共享一些数据，但又不想通过 props 层层传递时，上下文是一个很好的选择。例如，一个表单组件树内可能需要共享表单的提交状态等信息。
存储的应用场景
- 全局状态管理：对于应用的全局状态，如用户登录状态、购物车信息等，使用存储可以方便地在各个组件间共享和更新这些状态。
- 跨组件通信：当不同位置的组件需要相互通信和共享状态时，存储是一个有效的解决方案。例如，一个导航栏组件和内容组件可能都需要根据用户的登录状态来显示不同的内容，通过存储可以实现这种跨组件的状态同步。

6. 最佳实践

合理使用上下文和存储：根据项目的需求和组件结构，选择合适的状态管理方式。对于组件树内特定范围的数据共享，优先考虑上下文；对于全局状态或跨组件通信，使用存储更为合适。
保持状态的单一数据源：无论是使用上下文还是存储，尽量保持状态的单一数据源，避免在多个地方重复设置相同的状态，以免出现数据不一致的问题。
文档化状态管理：对于复杂的状态管理逻辑，特别是在使用上下文和存储结合的情况下，编写详细的文档说明状态的流动和更新机制，方便团队成员理解和维护代码。

在 Svelte 开发中，熟练掌握上下文和存储这两种状态管理方式，能够帮助我们构建高效、可维护的前端应用。通过合理运用它们的特性，我们可以轻松应对各种复杂的状态管理需求，提升开发效率和用户体验。