数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载本指南是 TinyBase 入门系列的基础一环围绕官方文档 Creating A Store 展开教你用一行createStore()调用创建出全新的 Store 实例验证其初始的空状态并深入源码理解 Store 在 TinyBase 内部是如何被构建出来的。读完本指南你将掌握创建 Store 的标准姿势、Store 的数据模型Tables 与 Values以及 Store 接口提供的完整方法家族为后续的读写、监听与持久化打好基础。环境准备从哪里导入 createStorecreateStore是 TinyBase 的核心入口函数从tinybase包即本仓库的 package.json 所定义的模块顶层即可导入。仓库根入口 src/index.ts 显式地 re-export 了./store/index.ts因此import {createStore} from tinybase; const store createStore();就这么简单——创建 Store 只需要这一次函数调用不需要任何配置参数或初始化选项。返回的store是一个完整可用的 Store 实例初始数据自然是空的。官方入门指南 Getting Started 给出了三种搭建运行环境的方式模板脚手架npm create tinybaselatest可生成 Todos、Chat、Drawing、Charting、Tic-tac-toe 等示例应用并可选 TypeScript/JavaScript、SQLite/PGlite 持久化、远程同步等配置浏览器 CDN在 HTML 中用script typeimportmap声明{imports: {tinybase: https://esm.sh/tinybase}}即可在模块脚本里正常import {createStore} from tinybaseNode 应用npm install tinybase后在.mjs模块脚本中直接导入使用。官方要求环境较为现代Node 16 及以上或常更新的浏览器因为 TinyBase 大量使用了当代 JavaScript 特性如需更老的兼容目标发行包里还提供了es6目录下的额外转译产物。验证空 StoregetValues 与 getTables创建完成后Store 中没有任何数据。用读取方法即可验证console.log(store.getValues()); // - {} console.log(store.getTables()); // - {}getValues()返回键值型数据集合ValuesgetTables()返回表格型数据集合Tables初始都为空对象。这两个方法是 Store 接口中最基础的读取入口其声明位于 Store 接口 中。Store 的数据模型两层数据结构要理解空的含义先要明白 Store 里能装什么。从类型声明 src/types/store/index.d.ts 可以看到Store 的内容Content由两部分组成export type Content [Tables, Values]; export type Tables {[tableId: Id]: Table}; export type Table {[rowId: Id]: Row}; export type Row {[cellId: Id]: Cell}; export type Cell string | number | boolean | null | AnyObject | AnyArray; export type Values {[valueId: Id]: Value}; export type Value string | number | boolean | null | AnyObject | AnyArray;其中Id即字符串类型见 common 类型。用官方文档 Writing To Stores 的层次化描述来理解Values键值数据Id/值 的简单键值对集合Tables表格数据四层嵌套结构——Store 的 Tables 对象包含多个 Table每个 Table 包含多个 Row每个 Row 包含多个 Cell。Cell 和 Value 的取值可以是字符串、数字、布尔值或null更丰富的数据可以存为普通 JavaScript 对象或数组TinyBase 内部会将其编码为 JSON 字符串此细节详见 Writing To Stores 指南中的编码与校验规则。正因为新创建的 Store 里这两层容器都是空对象所以getValues()与getTables()才分别返回{}。源码级解析createStore 到底做了什么createStore的实现位于 src/store/index.ts它是一个典型的工厂闭包调用时不接收任何参数返回一个通过闭包持有全部内部状态的对象字面量。类型声明侧src/types/store/index.d.ts同样印证了这一点export function createStore(): Store;从源码结构可以推断createStore内部初始化了大量以mapNew()/setNew()方式创建的空映射例如tablesMap、valuesMap——实际数据存储容器tablesSchemaMap、valuesSchemaMap——Schema 校验与默认值缓存一系列*Listeners集合与PairIdSet结构——为监听器系统addListener/callListeners/delListenerImpl准备的注册表changedTableIds、changedRowIds、changedCellIds、changedValues等——事务期间变更追踪用的临时结构middleware数组、internalListeners数组——中间件与内部钩子的挂载点。同时它会通过getListenerFunctions(() store)构建监听器工具函数并定义whileMutating、whileAcceptingEncodedData等执行上下文包装器。也就是说一次createStore()调用就把数据存储、Schema 校验、监听器注册表、事务追踪、中间件插槽、JSON 编解码等整套运行时基础设施一次性搭好Store 的响应式能力事件通知从出生那一刻起就已就位。最终函数返回一个对象字面量把getTables/getValues/setTables/transaction/addCellListener等约几十个方法逐一挂到store上并在_字段中放置一组受保护方法ProtectedMethods供 TinyBase 内部其他模块如持久化、同步通过受控通道调用同时显式声明isMergeable: () false——普通 Store 并非可合并mergeable类型需要合并能力时得使用独立的mergeable-store模块。Store 接口方法全景一旦 Store 创建完成即可使用其全部方法。以接口声明 src/types/store/index.d.ts 为准可以按职责分为几类读取getContent()、getTables()、getTable()、getRow()、getCell()、getValues()、getValue()以及getTableIds()、getRowIds()、getCellIds()、getValueIds()等 Id 枚举方法写入setContent()、setTables()、setTable()、setRow()、setCell()、setValues()、setValue()配合setPartialRow()、setPartialValues()、addRow()等便捷方法详见 Writing To Stores 指南删除delTables()、delTable()、delRow()、delCell()、delValues()、delValue()事务transaction()、startTransaction()、finishTransaction()、getTransactionChanges()、getTransactionLog()详见 Transactions 指南监听addValuesListener()、addTableListener()、addCellListener()、addRowListener()、addStartTransactionListener()、addDidFinishTransactionListener()等以及delListener()、getListenerStats()详见 Listening To Stores 指南Schema 与 JSONsetTablesSchema()、setValuesSchema()、setSchema()、getTablesSchema()以及getJson()、setJson()、setTablesJson()等序列化入口遍历与杂项forEachTable()、forEachRow()、forEachCell()、forEachValue()、clear()、getListenerStats()、isMergeable()。其中所有 setter 方法都遵循链式调用约定返回this这一点在实现源码中随处可见例如 src/store/index.ts 的setTablesJson、src/store/index.ts 的delListener等都以return store结尾方便连续书写。单元测试中也大量使用了这种链式写法例如 store-advanced.test.ts 中的createStore().setTables({...})可直接作为用法参考。创建之后的下一步Store 创建完成、数据模型了然于胸之后本仓库的入门系列已经为你规划好了完整的学习路线写入数据Writing To Stores——用setValues/setTables及各级 setter 填充数据理解删除与级联删除规则读取数据Reading From Stores——用各级 getter 取回数据响应变更Listening To Stores——注册监听器让 UI 随数据变化自动更新这正是 TinyBase 被称为reactive data store的原因批量操作Transactions——把多个写操作打包成原子事务进阶话题Importing TinyBase、TinyBase And TypeScript、Architectural Options。小结创建 Store 是使用 TinyBase 的第一步也是构建响应式数据应用的地基import {createStore} from tinybase之后你便拥有一个自带事件系统、事务机制、Schema 校验与 JSON 编解码能力的空数据容器。本指南不仅复现了官方文档的完整操作还从 src/store/index.ts 的工厂实现与 Store 类型声明 出发揭示了createStore的内部构建逻辑与 Store 的完整方法面。接下来请按上面的路线图继续探索写入与读取让数据真正流动起来。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐Feast Hazelcast Online Store 实战指南配置、原理与源码解析Feast Hazelcast Online Store 实战指南配置、原理与源码解析 Hazelcast online store 是 Feast 官方提供MLOps后端数据工程AgentScope面向企业级应用的可观测多智能体框架架构解析AgentScope面向企业级应用的可观测多智能体框架架构解析 AgentScope是一个基于Python的企业级多智能体应用开发框架专为解决复杂业务场景中人工智能大模型AI Agent多智能体Agent 框架Agent 编排工具调用RAGMCP 服务语音tinybase 实战在 React 中用 EditableCellView 原地编辑 Store 的 Cell 值tinybase 实战在 React 中用 EditableCellView 原地编辑 Store 的 Cell 值 本文基于 tinybase 官方 Rea数据库后端前端上一篇定制 EcoPaste 本地 Trellis 工程规范结构新增 Spec 层、调整包映射与任务上下文下一篇Flink DataStream 连接器容错保证全解析从 Source 状态更新到 Sink 端到端精确一次创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考