useObjectStore
useDBStore
useDBApiStore
apiCache
该函数会自动创建数据库和数据表，可以在任意文件和时机调用函数。
需要注意的是：如果设置了options.indexs,并且删除store时，应当也删除indexs配置存储表indexStoreName。import { indexStoreName } from '@feider/tool'。只是通过delete或cleat清除store内的数据，不需要其它操作
| 参数名称 |
是否必填 |
类型 |
说明 |
| params |
是 |
object |
配置对象 |
| 值名称 |
类型 |
说明 |
| 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))
useDBStore(key, defaultValue)
基于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' }
useDBApiStore(key, defaultValue, apiConfig)
该函数是数据缓存和接口请求组合的实现，当需要减少后台请求使用该函数
一个使用场景是：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,
})
