Skip to content

Commit

Permalink
docs: async cache example (#231)
Browse files Browse the repository at this point in the history
* type: fix type

* docs: async cache example
  • Loading branch information
NelsonYong authored Nov 15, 2024
1 parent 00dde9f commit 7f81dff
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 40 deletions.
60 changes: 30 additions & 30 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{
"name": "@vue-hooks-plus/monorepo",
"version": "1.0.0",
"private": true,
"name": "@vue-hooks-plus/monorepo",
"version": "1.0.0",
"private": true,
"scripts": {
"bootstrap": "tsx scripts/bootstrap.ts",
"build:vitepress-demo-block":"cd packages/vitepress/vitepress-demo-block && pnpm build",
"docs:dev":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts dev",
"docs:build":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts build",
"docs:build-github":"pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts github",
"docs:build-gitee":"pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts gitee",
"clean": " rimraf dist lib es",
"bootstrap": "tsx scripts/bootstrap.ts",
"build:vitepress-demo-block": "cd packages/vitepress/vitepress-demo-block && pnpm build",
"docs:dev": "pnpm build:vitepress-demo-block && tsx scripts/docs.ts dev",
"docs:build": "pnpm build:vitepress-demo-block && tsx scripts/docs.ts build",
"docs:build-github": "pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts github",
"docs:build-gitee": "pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts gitee",
"clean": " rimraf dist lib es",
"build": "pnpm bootstrap && tsx scripts/build.ts",
"test": "vitest",
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",
"coverage": "vitest run --coverage",
"prepare": "husky install"
},
"devDependencies": {
Expand All @@ -30,20 +30,20 @@
"@types/node": "^17.0.21",
"@types/qs": "^6.9.7",
"@vitejs/plugin-vue": "^2.3.1",
"@vue/compiler-core": "^3.2.37",
"@vue-hooks-plus/vite-plugin-gen-temp": "^2.6.6",
"@vue/compiler-core": "^3.2.37",
"@vue-hooks-plus/vite-plugin-gen-temp": "^2.6.6",
"@vue-hooks-plus/md-demo-plugins": "^1.0.0",
"@vue-hooks-plus/vitepress": "^1.2.4",
"@vue-hooks-plus/vitepress-demo-block": "workspace:^1.0.0",
"@vue-hooks-plus/use-immer":"workspace:^1.0.0",
"@vue-hooks-plus/use-worker":"workspace:^1.0.0",
"@vue-hooks-plus/use-request":"workspace:^2.0.0",
"@vue-hooks-plus/use-request-plugins":"workspace:^2.0.0",
"@vue-hooks-plus/types":"workspace:^2.0.0",
"@vue-hooks-plus/eslint-config":"workspace:^1.0.0",
"@vue-hooks-plus/use-immer": "workspace:^1.0.0",
"@vue-hooks-plus/use-worker": "workspace:^1.0.0",
"@vue-hooks-plus/use-request": "workspace:^2.0.0",
"@vue-hooks-plus/use-request-plugins": "workspace:^2.0.0",
"@vue-hooks-plus/types": "workspace:^2.0.0",
"@vue-hooks-plus/eslint-config": "workspace:^1.0.0",
"@vue/test-utils": "^2.1.0",
"@vitest/coverage-c8":"^0.25.7",
"execa":"^6.1.0",
"@vitest/coverage-c8": "^0.25.7",
"execa": "^6.1.0",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"cross-env": "^7.0.3",
Expand All @@ -52,12 +52,12 @@
"gh-pages": "^4.0.0",
"happy-dom": "^7.5.10",
"less": "^4.1.3",
"kolorist": "^1.6.0",
"kolorist": "^1.6.0",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"ts-morph": "^13.0.2",
"ts-node": "^10.7.0",
"tsx": "^3.11.0",
"tsx": "^3.11.0",
"typeit": "^8.7.0",
"typescript": "^5.0.4",
"vite": "3.0.2",
Expand All @@ -68,11 +68,11 @@
"vue": "^3.2.25",
"vue-tsc": "1.0.9",
"vue-typical": "^2.1.0",
"pinia":"^2.0.34",
"broadcast-channel":"^5.1.0",
"three":"0.147.0",
"axios": "^1.4.0",
"vue-demi": "^0.13.11"
"pinia": "^2.0.34",
"broadcast-channel": "^5.1.0",
"three": "0.147.0",
"axios": "^1.4.0",
"vue-demi": "^0.13.11"
},
"lint-staged": {
"*.{js,ts,tsx,vue}": [
Expand All @@ -88,4 +88,4 @@
"vue hooks",
"typeScript"
]
}
}
1 change: 0 additions & 1 deletion packages/hooks/src/useKeyPress/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ref } from 'vue'
// import { isFunction, isNumber, isString } from 'lodash'
import { BasicTarget, getTargetElement } from '../utils/domTarget'
import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget'
import { isNumber, isFunction, isString } from '../utils'
Expand Down
58 changes: 58 additions & 0 deletions packages/hooks/src/useRequest/docs/cache/demo/asyncDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<div>
<vhp-button @click="() => toggle()">show/hidden</vhp-button>
<div v-if="state" style="padding: 16px;">
<p>{{ data ?? cacheData }}</p>
<div> cacheData: {{ cacheData }} </div>
</div>
</div>
</template>

<script lang="ts" setup>
import { useRequest, useToggle } from 'vue-hooks-plus'
const cacheKey = 'cacheKey-async-storage'
const asyncStorage = {
setItem: (key: string, value: any) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
localStorage.setItem(key, value)
resolve(value)
}, 200)
})
},
getItem: (key: string) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(localStorage.getItem(key))
}, 100)
})
},
}
const [state, { toggle }] = useToggle()
const { data: cacheData, refresh } = useRequest(
() => asyncStorage.getItem(cacheKey) as Promise<string>,
{
cacheKey,
debugKey: cacheKey,
},
)
function getUsername(refresh: VoidFunction): Promise<string> {
return new Promise(resolve => {
setTimeout(() => {
asyncStorage.setItem(cacheKey, String(Date.now())).then(() => {
refresh()
})
resolve(String(Date.now()))
}, 1000)
})
}
const { data } = useRequest(() => getUsername(refresh), {
ready: state,
cacheKey: 'cacheKey-get-username',
})
</script>
11 changes: 10 additions & 1 deletion packages/hooks/src/useRequest/docs/cache/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ The cached data includes `data` and `params`. Through the `params` caching mecha

provides a `clearCache` method, which can clear the cache data of the specified `cacheKey`.

## Custom cache
## Custom sync cache

By setting `setCache` and `getCache`, you can customize the cache, for example, you can store data in `localStorage, IndexDB`, etc.

Expand All @@ -70,6 +70,15 @@ By setting `setCache` and `getCache`, you can customize the cache, for example,
title=""
desc=""> </demo>

## Custom async cache

Example `localforage``indexDB`.

<demo src="./demo/asyncDemo.vue"
language="vue"
title=""
desc="Use async cache"> </demo>

## API

```ts
Expand Down
13 changes: 11 additions & 2 deletions packages/hooks/src/useRequest/docs/cache/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ source:

提供了一个 `clearCache` 方法,可以清除指定 `cacheKey` 的缓存数据。 这里就不做展示

## 自定义缓存
## 自定义同步缓存

通过配置 `setCache``getCache`,可以自定义数据缓存,比如可以将数据存储到 `localStorage``IndexDB` 等。
通过配置 `setCache``getCache`,可以自定义数据缓存,比如可以将数据存储到 `localStorage` 等。

::: tip 请注意

Expand All @@ -70,6 +70,15 @@ source:
title=""
desc=""> </demo>

## 自定义异步缓存

`localforage``indexDB` 等。

<demo src="./demo/asyncDemo.vue"
language="vue"
title=""
desc="使用异步缓存"> </demo>

## API

```ts
Expand Down
2 changes: 1 addition & 1 deletion packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { computed, unref, watchEffect } from 'vue'
import { DebouncedFunc, ThrottleSettings } from 'lodash'
import { type DebouncedFunc, type ThrottleSettings } from 'lodash'
import throttle from 'lodash/throttle'
import { UseRequestPlugin } from '../types'

Expand Down
4 changes: 2 additions & 2 deletions packages/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComponentPublicInstance } from 'vue';
import { type ComponentPublicInstance } from 'vue';
import { ComputedRef } from 'vue';
import Cookies from 'js-cookie';
import type { DebouncedFunc } from 'lodash';
import { type DebouncedFunc } from 'lodash';
import { DeepReadonly } from 'vue';
import { Ref } from 'vue';
import { UnwrapNestedRefs } from 'vue';
Expand Down
4 changes: 2 additions & 2 deletions packages/use-request/src/plugins/useThrottlePlugin.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { computed, unref, watchEffect } from 'vue'
import { DebouncedFunc, ThrottleSettings } from 'lodash'
import { type DebouncedFunc, type ThrottleSettings } from 'lodash'
import throttle from 'lodash/throttle'
import { UseRequestPlugin } from '../types'

Expand Down Expand Up @@ -52,7 +52,7 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
}

return {
name: "throttlePlugin",
name: 'throttlePlugin',
onCancel: () => {
throttledRef.value?.cancel()
},
Expand Down
2 changes: 1 addition & 1 deletion packages/vitepress/vitepress-demo-block/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@
"scripts": {
"build": "vite build"
}
}
}

0 comments on commit 7f81dff

Please sign in to comment.