@feider/tool v1.1.4

useObjectStore useDBStore useDBApiStore apiCache

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

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

参数

params

options

返回值

result

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

示例

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一样。只是存储上限更高。暂时没有加密特性

参数

示例

公开配置数据文件 config.js

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

themeConfig.js

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

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

参数

apiConfig

示例

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

参数

param

返回

请求管理对象 | 方法 | 类型 | 说明 | | ---- | --- | --- | | 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,
})