Watermelon DB
made with React

Watermelon DB是一个🍉高性能反应数据库框架，是一种在React Native和React Web应用程序中处理用户数据的新方法。 Watermelon DB针对在React Native中构建复杂的应用程序进行了优化，其首要目标是现实性能，让应用程序快速启动。

安装

Npm

npm i @nozbe/watermelondb
npm i @nozbe/with-observables

Yarn

yarn add @nozbe/watermelondb
yarn add @nozbe/with-observables

使用

Watermelon支持React Native 和 React Web，需要一些不同的安装步骤，这里介绍Web的安装步骤。

安装Babel插件以支持ES6语法：

yarn add --dev @babel/plugin-proposal-decorators
yarn add --dev @babel/plugin-proposal-class-properties
yarn add --dev @babel/plugin-transform-runtime

在.babelrc添加ES7的支持：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    [
      "@babel/plugin-transform-runtime",
       {
         "helpers": true,
         "regenerator": true
       }
    ]
  ]
}

设置数据库

在你的项目中创建model/schema.js 

import { appSchema, tableSchema } from '@nozbe/watermelondb'

export default appSchema({
  version: 1,
  tables: [
    // tableSchemas go here...
  ]
})

在index.js 引入Watermelondb相关组件和刚才建立的schema文件。

import { Database } from '@nozbe/watermelondb'


import LokiJSAdapter from '@nozbe/watermelondb/adapters/lokijs'

const adapter = new LokiJSAdapter({
  schema,
  // These two options are recommended for new projects:
  useWebWorker: false,
  useIncrementalIndexedDB: true,
  // It's recommended you implement this method:
  // onIndexedDBVersionChange: () => {
  //   // database was deleted in another browser tab (user logged out), so we must make sure we delete
  //   // it in this tab as well
  //   if (checkIfUserIsLoggedIn()) {
  //     window.location.reload()
  //   }
  // },
})

示例