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}