怎样使用 svelte/store 中的 readable
正文
存在某些 store-state,它们的变动来源只依赖一个地方,且跟项目业务逻辑无关,这时其他地方都不会去修改它。比如获取当前时间,这时就不需要在特定组件里面去做修改,而是直接在设定 time 的时候,就将变动规则传给他,然后它就自己在那儿触发就行了,不需要管它。
<script>
import { readable } from 'svelte/store'
const time = readable(new Date().toTimeString(), (set) => {
const timer = setInterval(() => set(new Date().toTimeString()), 1000)
return () => {
clearInterval(timer)
}
})
</script>
<h1>{$time}</h1>
上面代码在一个具体组件里面,这纯粹是因为我想偷懒,不想写两个文件,一般来说是会将 store 单独抽成一个文件夹,然后分门别类地放置。
总结
readable 状态在初始化时会传入一个回调作第二个参数,这个回调中的代码会自执行,并通过 set 参函作自更新,这个回调的返回值也是一个函数,它在取消订阅的时候执行。