机械键盘 ¥499
×1状态管理
store 适合跨组件、跨层级共享状态。组件里只要加
$ 前缀就会自动订阅,
卸载时自动退订,不用担心内存泄漏。writablederived自定义 storeget()自动订阅
跨组件共享 — 无需 props
左边这个「购物车徽章」是独立组件,没有接收任何 props,却能和其他组件实时同步。
writable — 商品目录与加购
store 的写操作封装在模块里,组件只调用语义化方法,不直接碰底层状态。
无线鼠标 ¥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() 读取当前值。