TinyBase 入门指南：快速上手轻量级数据存储方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00363/article/details/148524658

TinyBase 入门指南：快速上手轻量级数据存储方案

tinybase The reactive data store for local‑first apps. 项目地址: https://gitcode.com/gh_mirrors/ti/tinybase

前言

在现代前端开发中，数据管理是一个核心问题。TinyBase 作为一个轻量级的数据存储解决方案，为开发者提供了简单易用的 API 来处理应用状态。本文将带你从零开始，快速掌握 TinyBase 的基本使用方法。

环境要求

在开始之前，请确保你的开发环境满足以下要求：

现代浏览器（推荐 Chrome、Firefox 或 Safari 的最新版本）
Node.js 16 或更高版本
基本的 JavaScript 或 TypeScript 知识

TinyBase 大量使用了现代 JavaScript 特性，因此较新的运行环境能获得最佳体验。如果你的项目需要兼容旧环境，可以使用项目提供的 ES6 转译版本。

快速开始方式

1. 使用模板项目（推荐）

对于新手来说，使用预配置的模板是最快捷的方式。TinyBase 提供了多种模板，涵盖不同技术栈：

npx tiged tinyplex/vite-tinybase my-tinybase-app
cd my-tinybase-app
npm install
npm run dev

执行上述命令后，你将获得一个完整的开发环境，包含：

预配置的 Vite 构建工具
基本的 TinyBase 示例代码
实时开发服务器

2. 浏览器直接使用

如果你只需要快速体验 TinyBase，可以直接在 HTML 文件中引入：

<!DOCTYPE html>
<html>
<head>
  <title>TinyBase 浏览器示例</title>
  <script type="importmap">
    {"imports": {"tinybase": "https://esm.sh/tinybase"}}
  </script>
  <script type="module">
    import {createStore} from 'tinybase';
    
    addEventListener('load', () => {
      const store = createStore();
      store.setValue('greeting', '你好');
      store.setCell('messages', 'welcome', 'content', '世界');
      
      document.body.innerHTML = 
        store.getValue('greeting') + ' ' + 
        store.getCell('messages', 'welcome', 'content');
    });
  </script>
</head>
<body></body>
</html>

这个简单的例子展示了 TinyBase 的核心功能：

创建存储实例
设置键值对数据
设置表格型数据
读取并显示数据

3. Node.js 项目集成

对于后端或全栈项目，可以通过 npm 安装 TinyBase：

mkdir my-tinybase-project
cd my-tinybase-project
npm init -y
npm install tinybase

然后创建 index.mjs 文件：

import {createStore} from 'tinybase';

const store = createStore();
store.setValue('version', '1.0.0');
store.setCell('config', 'app', 'name', 'My TinyBase App');

console.log(
  `应用 ${store.getCell('config', 'app', 'name')} 
   版本 ${store.getValue('version')}`
);

运行这个脚本，你将看到控制台输出应用的名称和版本信息。