@feider/tool

useObjectStore useDBStore useDBApiStore apiCache

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

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

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

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

参数名称	是否必填	类型	说明
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	表方法集合

以下方法，是基于 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	请求和缓存时长配置

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

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

该函数的与useDBApiStore使用场景的区别在于，useDBApiStore只根据关键key进行缓存，而apiCache则能对一个接口不同参数分别缓存。使用这个方法将接口层包装，在每次请求的时候，先查询缓存。如果存在缓存且未超时，则返回缓存，否则请求接口。 另外对于多处代码同时请求时，如果需要请求最多只会发送一次。所有请求共享response

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

参数名称	是否必填	类型	说明
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,
})