tall-mui-3-project/src/utils/indexedDB.js

import { name } from '@/config/db';
import { curry } from 'lodash';

// 创建表
const createCollection = (Vue, db) => {
  // projects项目表
  !db.objectStoreNames.contains('projects') && db.createObjectStore('projects', { keyPath: 'id' });
  // roles 角色表
  !db.objectStoreNames.contains('roles') && db.createObjectStore('roles', { keyPath: 'id' });
  // plan_tasks 定期任务
  !db.objectStoreNames.contains('plan_tasks') && db.createObjectStore('plan_tasks', { keyPath: 'id' });
  // fixed_tasks 固定全局任务
  Vue.prototype.$db.fixed_tasks = !db.objectStoreNames.contains('fixed_tasks') && db.createObjectStore('fixed_tasks', { keyPath: 'id' });
  // variable_tasks 可变全局任务
  Vue.prototype.$db.variable_tasks =
    !db.objectStoreNames.contains('variable_tasks') && db.createObjectStore('variable_tasks', { keyPath: 'id' });
  // plugins 插件表
  Vue.prototype.$db.plugins = !db.objectStoreNames.contains('plugins') && db.createObjectStore('plugins', { keyPath: 'id' });
};

/**
 * 新增数据
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 * @param {object} data 数据
 */
const create = (db, collection, data) => {
  return new Promise((resolve, reject) => {
    const request = db.transaction([collection], 'readwrite').objectStore(collection).add(data);

    request.onsuccess = event => {
      console.log(event);
      // FIXME:
      resolve(event);
    };

    request.onerror = event => {
      console.log(event);
      // FIXME:
      reject(event);
    };
  });
};

/**
 * 找到1条数据
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 * @param {string} key 索引关键字 一般是id
 */
const findOne = (db, collection, key) => {
  return new Promise((resolve, reject) => {
    const request = db.transaction([collection]).objectStore(collection).get(key);
    request.onerror = event => {
      console.log('indexedDB findOne error:', event);
      // FIXME:
      reject(event);
    };
    request.onsuccess = event => {
      console.log('indexedDB findOne success:', event);
      // FIXME:
      resolve(event);
    };
  });
};

/**
 * 找到所有数据
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 */
const find = (db, collection) => {
  return new Promise((resolve, reject) => {
    const request = db.transaction(collection).objectStore(collection).openCursor();
    request.onerror = event => {
      console.log('indexedDB find error:', event);
      reject(event);
    };
    request.onsuccess = event => {
      const cursor = event.target.result;
      if (cursor) {
        console.log('indexedDB find success:', cursor);
        cursor.continue();
        // FIXME:
        resolve(event.target.result);
      } else {
        console.log('没有更多数据了');
      }
    };
  });
};

/**
 * 更新数据
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 * @param {object} newData 新数据
 */
const update = (db, collection, newData) => {
  return new Promise((resolve, reject) => {
    const request = db.transaction([collection], 'readwrite').objectStore(collection).put(newData);
    request.onerror = event => {
      console.log('indexedDB UPDATE error:', event);
      reject(event);
    };
    request.onsuccess = event => {
      console.log('indexedDB UPDATE success:', event);
      // FIXME:
      resolve(event);
    };
  });
};

/**
 * 移除数据 通过关键字
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 * @param {string} key 关键字
 */
const remove = (db, collection, key) => {
  return new Promise((resolve, reject) => {
    const request = db.transaction([collection], 'readwrite').objectStore(collection).delete(key);
    request.onerror = event => {
      console.log('indexedDB REMOVE error:', event);
      reject(event);
    };
    request.onsuccess = event => {
      console.log('indexedDB REMOVE success:', event);
      resolve(event);
    };
  });
};

/**
 * 创建索引
 *
 * @param {object} db 数据库database
 * @param {string} collection 集合/表
 * @param {string} field 创建索引的字段名称
 * @param {string} key 关键字
 */
const createIndexAndFind = (db, collection, field, key) => {
  return new Promise((resolve, reject) => {
    const index = db.transaction([collection], 'readonly').objectStore(collection).index(field);
    const request = index.get(key);
    // FIXME:
    request.onerror = event => reject(event);
    request.onsuccess = event => resolve(event);
  });
};

const curriedCreate = curry(create);
export const curriedFindOne = curry(findOne);
export const curriedFind = curry(find);
export const curriedRemove = curry(remove);
export const curriedUpdate = curry(update);
export const curriedIndex = curry(createIndexAndFind);

const install = Vue => {
  Vue.prototype.$db = {};
  Vue.prototype.$db.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  const request = Vue.prototype.$db.indexedDB.open(name, Date.now()); //  IDBRequest 对象
  request.onerror = error => console.error('打开数据库失败', error);
  request.onsuccess = event => {
    console.log('INDEXED_DB OPEN SUCCESS');
    Vue.prototype.$db.db = event.target.result;
  };
  request.onupgradeneeded = event => {
    console.log('INDEXED_DB OPEN onupgradeneeded');
    Vue.prototype.$db.db = event.target.result;
    // 创建表
    createCollection(Vue, Vue.prototype.$db.db);
  };

  // create
  // console.log(curriedCreate(Vue.prototype.$db.db));
  Vue.prototype.$db.create = curriedCreate(Vue.prototype.$db.db);
};

export default { install };