怎样使用 svelte/store 中的 readable

Posted 2021-06-10 右究

正文

存在某些 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