useObjectStore useDBStore useDBApiStore apiCache

该函数会自动创建数据库和数据表，可以在任意文件和时机调用函数。

需要注意的是：如果设置了options.indexs,并且删除store时，应当也删除indexs配置存储表indexStoreName。import { indexStoreName } from '@feider/tool'。只是通过delete或cleat清除store内的数据，不需要其它操作

参数

| 参数名称 | 是否必填 | 类型 | 说明 | | -------- | -------- | ------ | -------- | | params | 是 | object | 配置对象 |

params

| 参数名称 | 是否必填 | 类型 | 说明 | | --------- | -------- | ------ | ----------------------------------------------------------------------------------------------------------------- | | DBName | 否 | string | 数据库名称，默认是qianjiang-chache | | storeName | 否 | string | 表名称，默认是qianjiang-chache-store | | options | 否 | object | 表配置，默认是{keyPath: 'id'}参考：https://developer.mozilla.org/zh-CN/docs/Web/API/IDBDatabase/createObjectStore |

options

| 参数名称 | 是否必填 | 类型 | 说明 | | ------------- | -------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | keyPath | 否 | string | 同https://developer.mozilla.org/zh-CN/docs/Web/API/IDBDatabase/createObjectStore | | autoIncrement | 否 | string | 同https://developer.mozilla.org/zh-CN/docs/Web/API/IDBDatabase/createObjectStore | | indexs | 否 | [indexName, keyPath, options][] | 索引配置二维数组。参考原生创建索引方法。形如：[['price', 'price'], ['uuid', 'uuid', {unique: true}]] |

返回值

| 值名称 | 类型 | 说明 | | ------ | ------ | ---------- | | result | object | 表方法集合 |

result

以下方法，是基于 IDBObjectStore Instance methods 封装，凡是异步都返回promis，否则和原函数一样

| 值名称 | 类型 | 说明 | | ---------- | ------------------------- | ---------------------------------------- | | get | () => Promise | 查询keyPath的值作为字段的值，返回Promise | | add | () => Promise | 添加一条记录 | | put | () => Promise | 修改一条记录 | | getAll | (query, count) => Promise | 查询表内所有匹配的数据，返回Promise | | count | () => Promise | 查询表内数据条数 | | clear | () => Promise | 清除表内某条数据 | | delete | () => Promise | 清除表内所有数据 | | getAllKeys | () => Promise | 查询所有匹配的key | | getKey | () => Promise | 查询一条匹配的key | | index | function | 获取某个索引 |

示例

const menuConfig = ref()
useObjectStore().then(store
  store.get('my-menu-config').then(result => {
    menuConfig.value = result || {}
  })
})

另一个例子

// 购物车
async function useShoppingCart() {
  const store = await useObjectStore({options: {indexs: [['price', 'price']]}})
  async function add(commodityInfo) {
    const commodity = await store.get(commodityInfo.id)
    if(commodity) {
      store.put({...commodityInfo, count: commodity.count + 1})
    } else {
      store.add({...commodityInfo, count: 1})
    }
  }
  return { ...store, add}
}
const cart = await useShoppingCart()
cart.add({id: 11950, name: '光明牛奶', price: 10})
cart.add({id: 20572, name: '椰树椰汁', price: 5})
console.log(await cart.get(11950))
console.log(await cart.getAll())
console.log(cart.index('price').get(5))

基于vue3的compositon api和indexDB，建立响应式缓存对象。用法和vueuse的# useLocalStorage一样。只是存储上限更高。暂时没有加密特性

参数

| 参数名称 | 是否必填 | 类型 | 说明 | | ------------ | -------- | ------ | ------------------------------------------------------------------------- | | key | 是 | string | 唯一标识，当多个位置调用useDBStore使用同一个key值，返回的是同一个响应对象 | | defaultValue | 是 | any | 默认值 |

示例

公开配置数据文件 config.js

const theme = useDBStore('db-theme', {})

themeConfig.js

import { theme } from 'config.js'
theme.value = {header: 'blue', icon: 'qixi.png' }

该函数是数据缓存和接口请求组合的实现，当需要减少后台请求使用该函数 一个使用场景是：menu是通过后台数据渲染，只有版本更新的时候才会更新。用该函数和监听版本变化清除indexDB数据来缓存

参数

| 参数名称 | 是否必填 | 类型 | 说明 | | ------------ | -------- | ------ | ---------------------------------------------------------------------------- | | key | 是 | string | 唯一标识，当多个位置调用useDBApiStore使用同一个key值，返回的是同一个响应对象 | | defaultValue | 是 | any | 默认值 | | apiConfig | 是 | object | 请求和缓存时长配置 |

apiConfig

| 参数名称 | 是否必填 | 类型 | 说明 | | ----------- | -------- | ------------ | ---------------------------------------------------------------------------- | | api | 是 | () => Promis | 封装好的接口请求函数，该函数应当返回一个Promise对象，并resolve需要缓存的数据 | | preCook | 选填 | () => any | 当需要对resolve的数据进行预处理，或指定缓存哪些数据，配置该函数 | | cacheSecond | 选填; | number | 缓存秒数，不填则为永久存储 |

示例

const menuData = useDBApiStore('my-menudata', [], {
  api: getMenuDataApi,
  preCook: (res) => res.data,
  cacheSecond: 3600 * 24 * 7
})

参数

| 参数名称 | 是否必填 | 类型 | 说明 | | -------- | -------- | ------ | -------- | | param | 是 | Object | 配置对象 |

param

| 参数名称 | 是否必填 | 类型 | 说明 | | ----------- | -------- | ------ | ---------------------------------------------------------------- | | api | 是 | object | 包含一个属性，key作为indexDB的表中的key，value为封装好的请求函数 | | cacheSecond | 否 | number | 缓存秒数 |

返回

请求管理对象 | 方法 | 类型 | 说明 | | ---- | --- | --- | | cacheFetch | () => Promise | 查询缓存，返回缓存或请求接口 | | apiFetch | () => Promise | 请求接口。之所以调这个接口，因为该接口成功后，也会更新indexDB内数据 |

import { apiCache } from '@feider/tool/apiCache'

function queryGameListApi(data) {
  return request({
    url: `/game/venueGameList`,
    method: 'post',
    data,
  })
}
const gameListControllor = new apiCache({
  api: { queryGameListApi },
  cacheSecond: 10
})
// 走查询缓存流程
gameListControllor.cacheFetch({pageSize: 10, pageNum: 1})
// 不走查询，比如新增之后
gameListControllor.apiFetch({pageSize: 10, pageNum: 1})
// 如果封装了useTable、useList等函数，需要传递请求函数而不是请求管理对象，应当保持函数内this指向
const { getList, list, page } = useList({
  api: queryGameListApiCon.cacheFetch.bind(queryGameListApiCon),
  form: form,
})