面试题：Svelte 组件通信与状态管理

Question

在一个复杂的 Svelte 应用中，存在多个嵌套组件，需要共享部分状态数据。请描述如何通过 Svelte 自带的组件通信方式以及合适的状态管理库（如 Svelte Store）来有效地管理这些状态，并且说明选择状态管理库的原因和其使用场景。

Answer 1

使用 Svelte 自带组件通信方式及状态管理库管理状态

1. Svelte 自带组件通信方式：
   • 父子组件通信：父组件可以通过向子组件传递 props 来共享数据。例如，父组件定义一个变量 data，然后在子组件标签中通过 {data} 作为 prop 传递。子组件通过 export let data; 来接收这个 prop。
   • 子父组件通信：子组件可以通过 createEventDispatcher 创建一个事件分发器，然后在需要的时候触发事件，父组件通过在子组件标签上使用 on:自定义事件名 来监听子组件触发的事件并获取数据。例如，子组件 dispatch('my - event', {data: '传递的数据'});，父组件 <ChildComponent on:my - event={(e) => {console.log(e.detail.data);}} />。
2. 使用 Svelte Store 管理共享状态：
   • 创建 Store：使用 import { writable } from'svelte/store'; 创建一个可写的 store，例如 const sharedState = writable({});。
   • 在组件中使用 Store：在需要共享状态的组件中导入这个 store。对于可写 store，可以使用 $ 前缀来读取值，例如 $sharedState，并且可以直接赋值来更新状态，如 $sharedState = newData;。在多个嵌套组件中都可以这样操作，从而实现状态共享。

选择 Svelte Store 的原因

1. 简单易用：Svelte Store 是 Svelte 官方推荐的状态管理方式，与 Svelte 框架深度集成，学习成本低，对于 Svelte 开发者来说容易上手。
2. 响应式：它基于 Svelte 的响应式系统，当 store 中的状态发生变化时，依赖该状态的组件会自动重新渲染，不需要额外复杂的订阅和更新机制。

使用场景

1. 全局状态管理：在整个应用中需要共享的状态，如用户登录信息、应用主题等，使用 Svelte Store 可以方便地在各个组件间共享和更新这些状态。
2. 跨组件层级状态共享：对于多层嵌套组件之间的状态共享，通过传递 props 的方式会变得繁琐，使用 Svelte Store 可以直接在不同层级组件中访问和修改状态，简化了通信流程。