nanostores

用途

Nanostores 是一个体积非常小的状态管理器（资料标注为 265–797 字节），可用于在 React、Preact、Vue 3、Svelte、Solid、Angular 和原生 JavaScript 之间共享状态，适合构建框架无关的状态逻辑。资料同时提到，它是 Astro islands 之间共享状态的推荐方案。

主要能力

存储类型

• atom（原子）：管理基础值，如计数器、状态枚举。示例中通过 $count.get() 读取、$count.set() 写入，也支持传入更新函数。
• map（映射）：管理对象状态，支持 setKey 更新单个键，set 替换整个对象，listenKeys 监听指定键的变化。
• computed（计算）：基于依赖派生状态，支持单依赖、多依赖以及链式计算。
• batched（批处理）：带防抖的计算存储，等待事件循环 tick 后再重新计算，用于避免多个依赖同时变化时触发多次 API 调用等场景。

框架集成

• React/Preact：@nanostores/react 的 useStore。
• Vue 3：@nanostores/vue 的 useStore。
• Svelte：使用 $ 前缀自动订阅。
• Solid：@nanostores/solid 的 useStore。
• 原生 JS：subscribe（立即回调）与 listen（仅变更时回调），均返回取消订阅函数。

生命周期与异步

• onMount：懒初始化，仅在首个订阅者挂载时执行，可返回清理函数在最后一个订阅者卸载时执行。
• 任务跟踪：task 标记异步操作，allTasks 等待全部任务完成（资料提到适用于 SSR）。
• effect：依赖变化时执行副作用，并支持清理函数。

事件与拦截

• onSet：在写入前校验或中止更新。
• onNotify：控制是否向订阅者发送通知。

测试支持

提供 keepMount（无订阅者时强制挂载）与 cleanStores（清理存储状态），配合测试框架使用。

使用方式

安装：

npm install nanostores
npm install @nanostores/react    # React/Preact
npm install @nanostores/vue      # Vue 3
npm install @nanostores/solid    # Solid

典型做法是在独立文件中定义存储（如 stores/counter.ts 中使用 atom，stores/user.ts 中使用 map），在组件内通过对应框架的 useStore 或 $ 前缀读取，并通过直接调用 set、setKey 或封装好的 action 函数修改状态。

适用场景

• 需要框架无关、可跨组件共享的状态。
• 在 Astro islands 等跨框架场景中共享状态（资料明确说明这是推荐方案）。
• 希望状态逻辑独立于组件定义、体积极小的项目。
• 需要派生状态、懒初始化数据请求与副作用管理的场景。

限制

资料未提供关于收费、价格、平台限制、性能基准或与其他状态库对比的说明；除资料中列出的框架外，未说明是否支持其它框架。上述未提及内容暂未提供。