Svelte跨组件状态管理

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}