svelte中对于组件内的状态管理比较简单，但是如何像其它框架一样进行跨组件间交互呢？
利用props进行状态传递
我们首先通过官网APi可以了解到和其它框架一样的传递策略，它们使用props传递状态，从而进行交互。
当一个组件需要与另一个组件共享数据时，可以在组件树中将状态上移，直到这些组件有了一个公共父级。
需要向下传递状态，直到到达需要此状态信息的所有组件为止。
这是使用props完成的，并且我认为这是一种最好的技术，因为它很简单。
Context API
在某些情况下props不实用。 例如在组件树中，两个组件之间的距离相当远遥，以至于我们不得不将状态提升到顶级组件。
这种情况下可以使用另一种技，它称为Context，当您希望让多个组件与后代进行通信，但又不希望到处传递props时，这是一种很好的方法。
在Context中设置对象，并将其与键关联：
<script>
import { setContext } from 'svelte'
const someObject = {}
setContext('someKey', someObject)
</script>
在另一个组件中，可以使用getContext检索分配给键的对象
<script>
import { getContext } from 'svelte'
const someObject = getContext('someKey')
</script>
注意:您只能在使用setContext的组件中或者它的后代中使用getContext来检索数据。
如果您想让位于2个不同组件树中的两个组件进行通信，那么还有另一种方式供我们使用：stores。
Svelte stores
当组件需要相互通信而不需要传递太多的props时，Svelte stores是处理应用程序状态的好方式。
首先我们需要导入从svelte/store导入writable:
import { writable } from 'svelte/store'
使用writable()函数创建存储变量，并将默认值作为第一个参数传递.
const username = writable('Guest')
它可以放在一个单独的文件中，您可以将其导入多个组件，例如store.js。
import { writable } from 'svelte/store'
export const username = writable('Guest')
现在加载此文件的任何其他组件都可以访问存储
<script>
import { username } from './store.js'
</script>
现在，可以使用set()将这个变量的值设置为一个新值，并将新值作为第一个参数传递
username.set('new username')
它可以使用update()函数进行更新，这与set()不同，因为您不只是将新值传递给它—而是运行一个将当前值作为参数传递的回调函数。
const newUsername = 'new username!'
username.update(existing => newUsername)
你可以在这里添加更多的逻辑
username.update(existing => {
console.log(`Updating username from ${existing} to ${newUsername}`)
return newUsername
})
如果想要获取一次store的值，我们可以使用从svelte/store导入的get()方法。
import { readable, get } from 'svelte/store'
export const username = writable('Guest')
get(username) //'Guest'
相反，要创建一个响应性的变量(每当它更改时就更新)，可以使用username)预先设置store变量。使用它将使组件在存储值发生更改时重新运行。
Svelte把$作为一个保留值，将阻止您将它用于与存储值无关的内容(这可能会导致混淆)，因此，如果您使用$来预先当做DOM引用，那么不要在Svelte中这样做。另一种选择是使用username的subscribe()方法，如果需要在变量更改时执行某些逻辑，这是最适合的方式。
username.subscribe(newValue => {
console.log(newValue)
})
除了writable stores之外，Svelte还提供了两种特殊类型的存储:readable stores 和 derived stores.
Svelte Readable Stores
Readable stores之所以特别，是因为它们无法从外部进行更新-没有set（）或update（）方法。 相反，一旦设置了初始状态，便无法从外部进行修改。
官方的Svelte文档展示了一个有趣的使用计时器更新日期的例子。我可以考虑设置一个计时器来从网络获取资源、执行API调用、从文件系统获取数据(使用本地Node.js服务器)或其他任何可以自主设置的东西。
在本例中，我们没有使用writable()来初始化存储变量，而是使用了readable().
import { readable } from 'svelte/store'
export const count = readable(0)
您可以在默认值之后提供一个函数，该函数将负责更新它。这个函数接收set函数来修改值
<script>
import { readable } from 'svelte/store'
export const count = readable(0, set => {
setTimeout(() => {
set(1)
}, 1000)
})
</script>
在本例中，我们在1秒后将值从0更新为1。
你也可以在这个函数中设置一个区间:
import { readable, get } from 'svelte/store'
export const count = readable(0, set => {
setInterval(() => {
set(get(count) + 1)
}, 1000)
})
您可以在另一个类似的组件中使用它:
<script>
import { count } from './store.js'
</script>
{$count}
Svelte Derived Stores
derived store允许您创建依赖于现有存储的值的新存储值。
您可以使用svelte/store导出的derived store来实现此目的，它以现有存储值作为第一个参数，以函数作为第二参数，该函数接收该存储值作为其第一个参数：
import { writable, derived } from 'svelte/store'
export const username = writable('Guest')
export const welcomeMessage = derived(username, $username => {
return `Welcome ${$username}`
})
<script>
import { username, welcomeMessage } from './store.js'
</script>
{$username}
{$welcomeMessage}
