Svelte 状态管理实战：使用 writable store 构建计数器应用

Svelte 状态管理基础：writable store 概述

在 Svelte 开发中，状态管理是构建复杂应用的关键部分。Svelte 提供了多种方式来管理状态，其中 writable store 是一种非常基础且常用的状态管理工具。

writable store 本质上是一个对象，它具备三个核心方法：subscribe、set 和 update。subscribe 方法用于注册一个回调函数，当状态发生变化时，这个回调函数会被触发。set 方法则用于直接设置 store 的新值，而 update 方法允许我们基于当前状态计算并设置新的状态值。

下面是一个简单创建 writable store 的示例代码：

import { writable } from'svelte/store';

// 创建一个初始值为 0 的 writable store
const count = writable(0);

在上述代码中，我们使用 writable 函数创建了一个名为 count 的 store，其初始值为 0。

构建计数器应用：初始化项目

在开始构建计数器应用之前，确保你已经安装了 Svelte 开发环境。如果没有，可以通过以下命令创建一个新的 Svelte 项目：

npx degit sveltejs/template counter-app
cd counter-app
npm install

上述命令首先使用 degit 从 Svelte 官方模板创建一个新项目 counter - app，然后进入项目目录并安装依赖。

计数器应用：引入 writable store

接下来，在我们的计数器应用中引入 writable store。打开 src/lib 目录，创建一个新的文件 stores.js。在这个文件中，我们定义计数器的 store：

import { writable } from'svelte/store';

export const counterStore = writable(0);

这里我们创建了一个名为 counterStore 的 writable store，并将其初始值设置为 0。然后，在需要使用这个 store 的组件中导入它。例如，打开 src/routes/+page.svelte 文件，在顶部导入我们刚刚创建的 store：

<script>
    import { counterStore } from '$lib/stores.js';
</script>

计数器应用：显示计数器值

有了 store 之后，我们首先要做的是在页面上显示计数器的值。在 +page.svelte 文件的 <script> 标签后添加以下代码：

<div>
    <p>当前计数: {$counterStore}</p>
</div>

在 Svelte 中，当我们在模板中使用 $ 前缀来访问 store 时，Svelte 会自动订阅这个 store，并且当 store 的值发生变化时，模板会自动更新。这里 $counterStore 就代表了 counterStore 当前的值。

计数器应用：增加计数功能

为了实现增加计数的功能，我们需要为计数器添加一个按钮，并在按钮点击时更新 counterStore 的值。在 +page.svelte 文件中继续添加代码：

<button on:click={() => {
    counterStore.update(n => n + 1);
}}>增加计数</button>

在上述代码中，我们为按钮添加了一个点击事件处理函数。在这个函数中，我们使用 counterStore 的 update 方法。update 方法接受一个回调函数，这个回调函数的参数 n 就是当前 counterStore 的值。我们通过 n + 1 计算出新的值并返回，update 方法会将这个新值设置为 counterStore 的新状态。

计数器应用：减少计数功能

类似地，我们可以添加减少计数的功能。在 +page.svelte 文件中添加以下代码：

<button on:click={() => {
    counterStore.update(n => n - 1);
}}>减少计数</button>

这里的逻辑和增加计数类似，只是在 update 回调函数中，我们返回 n - 1 来减少计数器的值。

计数器应用：重置计数功能

有时候我们可能需要将计数器重置为初始值。为了实现这个功能，我们可以添加一个重置按钮。在 +page.svelte 文件中继续添加代码：

<button on:click={() => {
    counterStore.set(0);
}}>重置计数</button>

这里我们使用了 counterStore 的 set 方法，直接将其值设置为 0，从而实现了重置计数器的功能。

深入理解 subscribe 方法

subscribe 方法除了在模板中通过 $ 前缀隐式使用外，我们也可以在 JavaScript 代码中显式使用它。例如，我们可以在 +page.svelte 的 <script> 标签中添加以下代码：

let unsubscribe;
counterStore.subscribe((value) => {
    console.log('计数器值发生变化:', value);
    // 如果需要，在这里可以执行更复杂的逻辑
    // 例如根据计数器值发送网络请求等
    unsubscribe = () => {
        // 取消订阅
    };
});

在上述代码中，我们使用 subscribe 方法注册了一个回调函数。当 counterStore 的值发生变化时，这个回调函数会被调用，并将新的值作为参数传入。同时，subscribe 方法会返回一个取消订阅函数，我们将其存储在 unsubscribe 变量中。如果在某个时刻我们不再需要监听 counterStore 的变化，可以调用 unsubscribe 函数来取消订阅。

在多个组件中共享 writable store

在实际应用中，我们可能需要在多个组件中共享同一个 writable store。假设我们有一个 CounterDisplay.svelte 组件用于显示计数器的值，以及一个 CounterControls.svelte 组件用于控制计数器（增加、减少、重置）。

首先，创建 CounterDisplay.svelte 组件：

<script>
    import { counterStore } from '$lib/stores.js';
</script>

<div>
    <p>当前计数: {$counterStore}</p>
</div>

然后，创建 CounterControls.svelte 组件：

<script>
    import { counterStore } from '$lib/stores.js';
</script>

<button on:click={() => {
    counterStore.update(n => n + 1);
}}>增加计数</button>

<button on:click={() => {
    counterStore.update(n => n - 1);
}}>减少计数</button>

<button on:click={() => {
    counterStore.set(0);
}}>重置计数</button>

最后，在 +page.svelte 文件中使用这两个组件：

<script>
    import CounterDisplay from './CounterDisplay.svelte';
    import CounterControls from './CounterControls.svelte';
</script>

<CounterDisplay />
<CounterControls />

通过这种方式，我们可以在不同的组件中共享 counterStore，并且这些组件对 counterStore 的操作会实时反映在其他组件上。

结合 Svelte 响应式语法

Svelte 的响应式语法与 writable store 结合可以实现更复杂的功能。例如，我们可以根据计数器的值动态地改变页面的样式。在 +page.svelte 文件中添加以下代码：

<script>
    import { counterStore } from '$lib/stores.js';
    let color;
    counterStore.subscribe((value) => {
        if (value > 10) {
            color ='red';
        } else {
            color = 'black';
        }
    });
</script>

<div style="color: {color}">
    <p>当前计数: {$counterStore}</p>
</div>

在上述代码中，我们通过 subscribe 方法监听 counterStore 的变化，并根据计数器的值动态地设置 color 变量。然后，我们在模板中使用这个 color 变量来设置文本的颜色。这样，当计数器的值大于 10 时，文本颜色会变为红色，否则为黑色。

处理异步操作与 writable store

在实际应用中，我们经常会遇到异步操作，例如从服务器获取数据并更新 writable store。假设我们有一个 API 用于获取计数器的初始值，并且在获取到数据后更新 counterStore。

首先，创建一个函数来模拟异步获取数据：

async function fetchInitialCount() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(5);
        }, 1000);
    });
}

然后，在 +page.svelte 的 <script> 标签中使用这个函数来更新 counterStore：

<script>
    import { counterStore } from '$lib/stores.js';
    async function initCounter() {
        const initialCount = await fetchInitialCount();
        counterStore.set(initialCount);
    }
    initCounter();
</script>

在上述代码中，initCounter 函数首先通过 await 等待 fetchInitialCount 函数返回数据，然后使用 counterStore 的 set 方法将获取到的数据设置为计数器的初始值。这样，在应用初始化时，计数器会从服务器获取初始值并显示。

性能优化与 writable store

在使用 writable store 时，性能优化也是需要考虑的方面。当一个 store 频繁更新时，可能会导致不必要的重新渲染。为了避免这种情况，我们可以使用 derived store。

假设我们有一个 counterStore，并且我们需要根据 counterStore 的值计算一个派生值，例如计算计数器值的平方。我们可以创建一个 derived store：

import { writable, derived } from'svelte/store';

const counterStore = writable(0);
const squaredCounter = derived(counterStore, ($counter) => {
    return $counter * $counter;
});

在上述代码中，derived 函数接受两个参数，第一个参数是源 store（这里是 counterStore），第二个参数是一个回调函数。当源 store 的值发生变化时，回调函数会被调用，并且返回的值会成为 derived store 的新值。这样，当 counterStore 更新时，只有依赖于 squaredCounter 的组件会重新渲染，而不是所有依赖于 counterStore 的组件都重新渲染，从而提高了性能。

与其他状态管理库的比较

与其他流行的前端状态管理库（如 Redux、MobX 等）相比，Svelte 的 writable store 具有简洁、轻量的特点。Redux 采用了严格的单向数据流，虽然适合大型应用的状态管理，但引入了较多的样板代码，例如需要定义 action、reducer 等。MobX 则通过响应式编程来管理状态，相对 Redux 更加灵活，但学习曲线也较陡。

而 Svelte 的 writable store 直接与组件紧密结合，使用简单直观。它不需要像 Redux 那样进行复杂的配置，也不需要像 MobX 那样理解复杂的响应式编程概念。对于小型到中型规模的应用，Svelte 的 writable store 提供了足够强大且简洁的状态管理方案。

错误处理与 writable store

在更新 writable store 时，可能会出现错误。例如，在异步更新时，网络请求可能失败。我们可以通过在 update 或 set 操作中添加错误处理逻辑来处理这种情况。

假设我们有一个异步更新计数器的函数，并且在更新失败时需要显示错误信息：

<script>
    import { counterStore } from '$lib/stores.js';
    let errorMessage;
    async function asyncIncrement() {
        try {
            // 模拟异步操作
            await new Promise((resolve) => setTimeout(resolve, 1000));
            counterStore.update(n => n + 1);
        } catch (error) {
            errorMessage = '更新计数器失败';
        }
    }
</script>

<button on:click={asyncIncrement}>异步增加计数</button>
{#if errorMessage}
    <p style="color: red">{errorMessage}</p>
{/if}

在上述代码中，asyncIncrement 函数在异步操作完成后尝试更新 counterStore。如果异步操作失败（例如网络请求失败），catch 块会捕获错误并设置 errorMessage。然后，在模板中通过 if 块判断是否有错误信息，如果有则显示错误提示。

总结与扩展

通过以上内容，我们深入探讨了 Svelte 中 writable store 的使用，并通过构建计数器应用展示了其在实际项目中的应用。从基本的创建和使用，到在多个组件中共享、结合响应式语法、处理异步操作以及性能优化等方面，我们逐步展示了 writable store 的强大功能。

在实际开发中，我们可以根据项目的需求进一步扩展和优化。例如，结合 Svelte 的路由功能，实现不同页面共享计数器状态；或者与后端 API 进行更复杂的交互，根据用户的操作记录等更新计数器。通过不断探索和实践，我们可以充分发挥 Svelte 状态管理的优势，构建出高效、可维护的前端应用。