面试题：Svelte自定义Store的基本设计模式

Question

请阐述Svelte自定义Store的基本设计模式，说明如何通过创建一个简单的计数器自定义Store来体现这种模式，包括状态定义、订阅逻辑以及更新逻辑的实现。

Answer 1

Svelte自定义Store的基本设计模式

1. 状态定义：在Svelte中，自定义Store通常需要定义一个状态变量，用于存储相关的数据。这个状态可以是任何类型，如数字、对象、数组等。
2. 订阅逻辑：Store需要提供一个subscribe方法，该方法接受一个回调函数作为参数。当状态发生变化时，Store会调用这个回调函数，将最新的状态传递给它。这使得组件可以订阅Store的状态变化，并在状态更新时执行相应的操作。
3. 更新逻辑：通常需要提供一些方法来更新Store的状态。这些方法可以直接修改状态变量，并通过调用订阅回调函数来通知所有订阅者状态已更新。

创建简单计数器自定义Store

// counterStore.js
import { writable } from'svelte/store';

// 1. 状态定义
const counter = writable(0);

// 2. 订阅逻辑
// 已经由writable自动实现，返回的对象有subscribe方法
// const { subscribe } = counter;

// 3. 更新逻辑
const increment = () => {
    counter.update(n => n + 1);
};
const decrement = () => {
    counter.update(n => n - 1);
};

export { counter, increment, decrement };

在组件中使用：

<script>
    import { counter, increment, decrement } from './counterStore.js';
</script>

<button on:click={decrement}>-</button>
<span>{$counter}</span>
<button on:click={increment}>+</button>

在上述代码中，首先使用writable创建了一个初始值为0的计数器状态counter，writable自动实现了订阅逻辑。然后定义了increment和decrement方法来更新计数器的值，这两个方法通过update方法来修改状态并通知订阅者。在组件中，可以直接使用$counter来获取当前状态，并通过点击按钮调用increment和decrement方法来更新状态。