面试题：Svelte中状态管理的基本方式

Question

请简述在Svelte中进行状态管理的基本方式有哪些，并举例说明如何在一个简单的计数器组件中运用其中一种方式来管理计数状态。

Answer 1

Svelte中状态管理的基本方式

1. 局部变量：在组件内部声明变量来管理状态。这是最基本的方式，适合简单的组件状态管理。例如，在一个按钮组件中，用一个布尔变量来控制按钮的禁用状态。
2. 存储（Stores）：
   • 可读存储（Readable stores）：用于创建可读取的状态，例如创建一个存储来管理应用程序的主题（亮色或暗色）。
   • 可写存储（Writable stores）：不仅可读，还可写，常用于需要在不同组件间共享且可修改的状态。
   • 衍生存储（Derived stores）：基于其他存储派生出来的存储，例如根据两个数字存储计算它们的和的存储。

在简单计数器组件中运用局部变量管理计数状态示例

<script>
    let count = 0;
    const increment = () => {
        count++;
    };
    const decrement = () => {
        if (count > 0) {
            count--;
        }
    };
</script>

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

在上述代码中，我们在<script>标签内声明了一个局部变量count用于存储计数器的值。然后定义了increment和decrement两个函数，分别用于增加和减少count的值。在组件的模板部分，通过按钮的click事件调用这两个函数，从而实现对计数状态的管理。