stores

在Svelte中处理单个组件的状态非常简单。 但是如何在组件之间传递状态呢？ 使用props传递状态 第一种策略是其他UI框架常见的策略，即使用props传递状态，将状态上升。 当一个组件需要与另一个组件共享数据时，可以将状态上升到组件树中的共同父级。 状态需要通过props传递，直到到达需要此状态信息的所有组件。 这是使用props完成的，我认为这是最好的技术，因为它很简单。 有关props的更多信息，请参考Svelte Props教程。 Context API 有些情况下，props并不是一个实用的方法。也许两个组件在组件树中距离太远，我们必须将状态移动到顶层组件。 在这种情况下，可以使用另一种技术，称为context API，它非常适合让多个组件与后代组件进行通信，而无需传递props。 context API由svelte软件包提供的两个函数提供：getContext和setContext。 您可以设置与键关联的上下文对象： <script> import { setContext } from 'svelte' const someObject = {} setContext('someKey', someObject) </script> 在另一个组件中，您可以使用getContext来检索分配给键的对象： <script> import { getContext } from 'svelte' const someObject = getContext('someKey') </script> 您只能在使用setContext的组件或其子代之一中使用getContext检索键。 如果要让两个位于两个不同组件树中的组件进行通信，那么我们还有另外一个工具：stores。 使用Svelte stores 当组件需要相互通信而无需传递太多props时，Svelte stores是一种非常好的工具来处理应用程序的状态。 首先，您必须从svelte/store中导入可写的writable： import { writable } from 'svelte/store' 然后使用writable()函数创建一个存储变量，将默认值作为第一个参数传递： const username = writable('Guest') 这可以放在一个单独的文件中，您可以将其导入多个组件中，例如称为store.js的文件中（它不是一个组件，因此可以是.js文件而不是.svelte）： import { writable } from 'svelte/store' export const username = writable('Guest') 加载此文件的任何其他组件现在都可以访问存储：...