Skip to content

Commit 7f81dff

Browse files
NelsonYongNelsonYong
authored
docs: async cache example (#231)
* type: fix type * docs: async cache example
1 parent 00dde9f commit 7f81dff

File tree

9 files changed

+115
-40
lines changed

9 files changed

+115
-40
lines changed

‎package.json‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
2-
"name": "@vue-hooks-plus/monorepo",
3-
"version": "1.0.0",
4-
"private": true,
2+
"name": "@vue-hooks-plus/monorepo",
3+
"version": "1.0.0",
4+
"private": true,
55
"scripts": {
6-
"bootstrap": "tsx scripts/bootstrap.ts",
7-
"build:vitepress-demo-block":"cd packages/vitepress/vitepress-demo-block && pnpm build",
8-
"docs:dev":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts dev",
9-
"docs:build":"pnpm build:vitepress-demo-block && tsx scripts/docs.ts build",
10-
"docs:build-github":"pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts github",
11-
"docs:build-gitee":"pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts gitee",
12-
"clean": " rimraf dist lib es",
6+
"bootstrap": "tsx scripts/bootstrap.ts",
7+
"build:vitepress-demo-block": "cd packages/vitepress/vitepress-demo-block && pnpm build",
8+
"docs:dev": "pnpm build:vitepress-demo-block && tsx scripts/docs.ts dev",
9+
"docs:build": "pnpm build:vitepress-demo-block && tsx scripts/docs.ts build",
10+
"docs:build-github": "pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts github",
11+
"docs:build-gitee": "pnpm build:vitepress-demo-block && tsx scripts/gitPage.ts gitee",
12+
"clean": " rimraf dist lib es",
1313
"build": "pnpm bootstrap && tsx scripts/build.ts",
14-
"test": "vitest",
14+
"test": "vitest",
1515
"test:ui": "vitest --ui",
16-
"coverage": "vitest run --coverage",
16+
"coverage": "vitest run --coverage",
1717
"prepare": "husky install"
1818
},
1919
"devDependencies": {
@@ -30,20 +30,20 @@
3030
"@types/node": "^17.0.21",
3131
"@types/qs": "^6.9.7",
3232
"@vitejs/plugin-vue": "^2.3.1",
33-
"@vue/compiler-core": "^3.2.37",
34-
"@vue-hooks-plus/vite-plugin-gen-temp": "^2.6.6",
33+
"@vue/compiler-core": "^3.2.37",
34+
"@vue-hooks-plus/vite-plugin-gen-temp": "^2.6.6",
3535
"@vue-hooks-plus/md-demo-plugins": "^1.0.0",
3636
"@vue-hooks-plus/vitepress": "^1.2.4",
3737
"@vue-hooks-plus/vitepress-demo-block": "workspace:^1.0.0",
38-
"@vue-hooks-plus/use-immer":"workspace:^1.0.0",
39-
"@vue-hooks-plus/use-worker":"workspace:^1.0.0",
40-
"@vue-hooks-plus/use-request":"workspace:^2.0.0",
41-
"@vue-hooks-plus/use-request-plugins":"workspace:^2.0.0",
42-
"@vue-hooks-plus/types":"workspace:^2.0.0",
43-
"@vue-hooks-plus/eslint-config":"workspace:^1.0.0",
38+
"@vue-hooks-plus/use-immer": "workspace:^1.0.0",
39+
"@vue-hooks-plus/use-worker": "workspace:^1.0.0",
40+
"@vue-hooks-plus/use-request": "workspace:^2.0.0",
41+
"@vue-hooks-plus/use-request-plugins": "workspace:^2.0.0",
42+
"@vue-hooks-plus/types": "workspace:^2.0.0",
43+
"@vue-hooks-plus/eslint-config": "workspace:^1.0.0",
4444
"@vue/test-utils": "^2.1.0",
45-
"@vitest/coverage-c8":"^0.25.7",
46-
"execa":"^6.1.0",
45+
"@vitest/coverage-c8": "^0.25.7",
46+
"execa": "^6.1.0",
4747
"husky": "^8.0.1",
4848
"lint-staged": "^13.0.3",
4949
"cross-env": "^7.0.3",
@@ -52,12 +52,12 @@
5252
"gh-pages": "^4.0.0",
5353
"happy-dom": "^7.5.10",
5454
"less": "^4.1.3",
55-
"kolorist": "^1.6.0",
55+
"kolorist": "^1.6.0",
5656
"prettier": "^1.19.1",
5757
"rimraf": "^3.0.2",
5858
"ts-morph": "^13.0.2",
5959
"ts-node": "^10.7.0",
60-
"tsx": "^3.11.0",
60+
"tsx": "^3.11.0",
6161
"typeit": "^8.7.0",
6262
"typescript": "^5.0.4",
6363
"vite": "3.0.2",
@@ -68,11 +68,11 @@
6868
"vue": "^3.2.25",
6969
"vue-tsc": "1.0.9",
7070
"vue-typical": "^2.1.0",
71-
"pinia":"^2.0.34",
72-
"broadcast-channel":"^5.1.0",
73-
"three":"0.147.0",
74-
"axios": "^1.4.0",
75-
"vue-demi": "^0.13.11"
71+
"pinia": "^2.0.34",
72+
"broadcast-channel": "^5.1.0",
73+
"three": "0.147.0",
74+
"axios": "^1.4.0",
75+
"vue-demi": "^0.13.11"
7676
},
7777
"lint-staged": {
7878
"*.{js,ts,tsx,vue}": [
@@ -88,4 +88,4 @@
8888
"vue hooks",
8989
"typeScript"
9090
]
91-
}
91+
}

‎packages/hooks/src/useKeyPress/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ref } from 'vue'
2-
// import { isFunction, isNumber, isString } from 'lodash'
32
import { BasicTarget, getTargetElement } from '../utils/domTarget'
43
import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget'
54
import { isNumber, isFunction, isString } from '../utils'

‎packages/hooks/src/useRequest/docs/cache/demo/asyncDemo.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div>
3+
<vhp-button @click="() => toggle()">show/hidden</vhp-button>
4+
<div v-if="state" style="padding: 16px;">
5+
<p>{{ data ?? cacheData }}</p>
6+
<div> cacheData: {{ cacheData }} </div>
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { useRequest, useToggle } from 'vue-hooks-plus'
13+
const cacheKey = 'cacheKey-async-storage'
14+
15+
const asyncStorage = {
16+
setItem: (key: string, value: any) => {
17+
return new Promise((resolve, reject) => {
18+
setTimeout(() => {
19+
localStorage.setItem(key, value)
20+
resolve(value)
21+
}, 200)
22+
})
23+
},
24+
getItem: (key: string) => {
25+
return new Promise((resolve, reject) => {
26+
setTimeout(() => {
27+
resolve(localStorage.getItem(key))
28+
}, 100)
29+
})
30+
},
31+
}
32+
33+
const [state, { toggle }] = useToggle()
34+
35+
const { data: cacheData, refresh } = useRequest(
36+
() => asyncStorage.getItem(cacheKey) as Promise<string>,
37+
{
38+
cacheKey,
39+
debugKey: cacheKey,
40+
},
41+
)
42+
43+
function getUsername(refresh: VoidFunction): Promise<string> {
44+
return new Promise(resolve => {
45+
setTimeout(() => {
46+
asyncStorage.setItem(cacheKey, String(Date.now())).then(() => {
47+
refresh()
48+
})
49+
resolve(String(Date.now()))
50+
}, 1000)
51+
})
52+
}
53+
54+
const { data } = useRequest(() => getUsername(refresh), {
55+
ready: state,
56+
cacheKey: 'cacheKey-get-username',
57+
})
58+
</script>

‎packages/hooks/src/useRequest/docs/cache/index.en-US.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ The cached data includes `data` and `params`. Through the `params` caching mecha
5454

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

57-
## Custom cache
57+
## Custom sync cache
5858

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

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

73+
## Custom async cache
74+
75+
Example `localforage` 、 `indexDB`.
76+
77+
<demo src="./demo/asyncDemo.vue"
78+
language="vue"
79+
title=""
80+
desc="Use async cache"> </demo>
81+
7382
## API
7483

7584
```ts

‎packages/hooks/src/useRequest/docs/cache/index.zh-CN.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ source:
5454

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

57-
## 自定义缓存
57+
## 自定义同步缓存
5858

59-
通过配置 `setCache` 和 `getCache`，可以自定义数据缓存，比如可以将数据存储到 `localStorage`、`IndexDB` 等。
59+
通过配置 `setCache` 和 `getCache`，可以自定义数据缓存，比如可以将数据存储到 `localStorage` 等。
6060

6161
::: tip 请注意
6262

@@ -70,6 +70,15 @@ source:
7070
title=""
7171
desc=""> </demo>
7272

73+
## 自定义异步缓存
74+
75+
如 `localforage` 、 `indexDB` 等。
76+
77+
<demo src="./demo/asyncDemo.vue"
78+
language="vue"
79+
title=""
80+
desc="使用异步缓存"> </demo>
81+
7382
## API
7483

7584
```ts

‎packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { computed, unref, watchEffect } from 'vue'
2-
import { DebouncedFunc, ThrottleSettings } from 'lodash'
2+
import { type DebouncedFunc, type ThrottleSettings } from 'lodash'
33
import throttle from 'lodash/throttle'
44
import { UseRequestPlugin } from '../types'
55

‎packages/types/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { ComponentPublicInstance } from 'vue';
1+
import { type ComponentPublicInstance } from 'vue';
22
import { ComputedRef } from 'vue';
33
import Cookies from 'js-cookie';
4-
import type { DebouncedFunc } from 'lodash';
4+
import { type DebouncedFunc } from 'lodash';
55
import { DeepReadonly } from 'vue';
66
import { Ref } from 'vue';
77
import { UnwrapNestedRefs } from 'vue';

‎packages/use-request/src/plugins/useThrottlePlugin.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { computed, unref, watchEffect } from 'vue'
2-
import { DebouncedFunc, ThrottleSettings } from 'lodash'
2+
import { type DebouncedFunc, type ThrottleSettings } from 'lodash'
33
import throttle from 'lodash/throttle'
44
import { UseRequestPlugin } from '../types'
55

@@ -52,7 +52,7 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
5252
}
5353

5454
return {
55-
name: "throttlePlugin",
55+
name: 'throttlePlugin',
5656
onCancel: () => {
5757
throttledRef.value?.cancel()
5858
},

‎packages/vitepress/vitepress-demo-block/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@
2525
"scripts": {
2626
"build": "vite build"
2727
}
28-
}
28+
}

0 commit comments

Comments
 (0)