面试题：Svelte中事件派发与全局状态管理在简单应用场景的选择

Question

假设你正在开发一个简单的待办事项列表应用，有添加待办事项和删除待办事项的功能。在这个场景下，阐述何时使用Svelte的事件派发，何时使用全局状态管理来实现组件间的通信，并简要说明实现思路。

Answer 1

使用Svelte事件派发的场景及思路

1. 场景：当待办事项列表应用中，子组件之间存在相对简单、局部的交互，例如一个添加待办事项的子组件和待办事项列表子组件之间的交互。添加待办事项组件添加新事项后，直接通知其直接父组件或兄弟组件更新列表。这种交互只涉及到几个紧密相关的组件，不影响应用的其他部分。
2. 思路：
   • 在添加待办事项的组件中，定义一个自定义事件。例如，当用户点击添加按钮且输入内容合法时，通过 createEventDispatcher 创建事件派发器，并使用它来触发一个 add-todo 事件，同时将新待办事项的数据作为事件参数传递。
   • 在父组件或兄弟组件中，使用 on:add-todo 指令来监听这个事件，并在事件处理函数中更新待办事项列表。

使用全局状态管理的场景及思路

1. 场景：当应用中多个不相关组件都需要访问或修改待办事项列表状态时，例如，在一个导航栏组件中有一个按钮，点击后清除所有待办事项，而导航栏组件和待办事项列表组件可能在组件树中相距较远，甚至不属于同一个分支。或者在不同路由页面都需要展示和操作待办事项列表。
2. 思路：
   • 使用 Svelte 的 writable 创建一个全局的状态变量来存储待办事项列表。例如 import { writable } from'svelte/store'; const todoList = writable([]);
   • 对于添加待办事项功能，相关组件从全局状态获取当前列表，添加新事项后更新全局状态。比如在添加组件中 import { todoList } from './globalStore.js'; const newTodo = '新事项'; todoList.update(list => [...list, newTodo]);
   • 对于删除待办事项功能，类似地从全局状态获取列表，删除指定事项后更新全局状态。在删除组件中 import { todoList } from './globalStore.js'; const indexToDelete = 0; todoList.update(list => list.filter((_, index) => index!== indexToDelete));
   • 任何需要展示或操作待办事项列表的组件，都订阅这个全局状态，以便在状态变化时更新自身视图。例如 import { todoList } from './globalStore.js'; let list; todoList.subscribe(value => list = value); 然后在组件模板中使用 {#each list as todo}...{/each} 展示列表。