跨组件共享 — 无需 props

左边这个「购物车徽章」是独立组件,没有接收任何 props,却能和其他组件实时同步。

writable — 商品目录与加购

store 的写操作封装在模块里,组件只调用语义化方法,不直接碰底层状态。

机械键盘 ¥499
×1
无线鼠标 ¥249
4K 显示器 ¥1899
降噪耳机 ¥899
×2
人体工学椅 ¥2399

购物车明细 — 双向操作

增加、减少、删除都会更新所有依赖这些 store 的组件。

  • 机械键盘 ¥499
    1
    ¥499
  • 降噪耳机 ¥899
    2
    ¥1798

derived — 自动计算的汇总

总件数、小计、折扣档、应付金额全部由 derived 得出,且派生自派生也完全支持。

商品件数 3
商品小计 ¥2297
优惠档位 满 1500 打 9.5 折
应付金额 ¥2182

加购到 ¥1500 / ¥3000 以上,观察折扣档位自动跳变。

自定义 store — 掌控发布时机

当 writable 不够用(需要防抖、节流、复杂订阅逻辑)时,可以手写 subscribe。

最后变更时间 尚未变更

上面每次操作购物车都会更新这个时间戳(由页面顶部的 $effect 驱动)。

get() — 非响应式读取

在事件回调或普通函数里,无法使用 $ 前缀,此时用 get() 读取当前值。

基于 Svelte 5 与 SvelteKit 构建 · 全部示例均可在浏览器中实时交互