怎样使用 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 参函作自更新,这个回调的返回值也是一个函数,它在取消订阅的时候执行。

参考

https://www.sveltejs.cn/tutorial/readable-stores

posted on 2021-06-10 11:46  右究  阅读(99)  评论(0编辑  收藏  举报

导航