面试题：Svelte中如何基于自定义Store实现简单的事件驱动状态管理

Question

请阐述在Svelte中自定义Store的基本结构，并举例说明如何通过自定义Store创建一个能响应特定事件（如按钮点击）来更新状态的简单应用，要求写出关键代码片段。

Answer 1

Svelte中自定义Store的基本结构

在Svelte中，一个自定义Store通常是一个包含 subscribe 方法的对象。subscribe 方法接受一个回调函数作为参数，该回调函数会在状态发生变化时被调用。此外，自定义Store 还可以包含 set 和 update 方法（非必需），set 用于直接设置状态，update 用于通过回调函数来更新状态。

基本结构如下：

function myCustomStore(initialValue) {
    let value = initialValue;
    const subscribers = new Set();

    const subscribe = (run) => {
        run(value);
        const unsubscribe = () => subscribers.delete(run);
        subscribers.add(run);
        return unsubscribe;
    };

    const set = (newValue) => {
        value = newValue;
        subscribers.forEach(subscriber => subscriber(value));
    };

    const update = (updater) => {
        set(updater(value));
    };

    return {
        subscribe,
        set,
        update
    };
}

通过自定义Store创建响应按钮点击更新状态的简单应用

1. 创建自定义Store：

// stores.js
function clickCounterStore() {
    let count = 0;
    const subscribers = new Set();

    const subscribe = (run) => {
        run(count);
        const unsubscribe = () => subscribers.delete(run);
        subscribers.add(run);
        return unsubscribe;
    };

    const increment = () => {
        count++;
        subscribers.forEach(subscriber => subscriber(count));
    };

    return {
        subscribe,
        increment
    };
}

export const clickCounter = clickCounterStore();

2. 在Svelte组件中使用自定义Store：

<!-- App.svelte -->
<script>
    import { clickCounter } from './stores.js';
    let count;
    const unsubscribe = clickCounter.subscribe((newCount) => {
        count = newCount;
    });

    const handleClick = () => {
        clickCounter.increment();
    };

    // 确保在组件销毁时取消订阅
    $: onDestroy(() => {
        unsubscribe();
    });
</script>

<button on:click={handleClick}>
    Click me! ({count})
</button>

在上述代码中，clickCounterStore 创建了一个自定义Store，它有一个 subscribe 方法用于订阅状态变化，以及一个 increment 方法用于更新状态。在 App.svelte 组件中，引入该自定义Store，订阅状态并在按钮点击时调用 increment 方法更新状态。