1
1
# vue-compose-promise [ ![ Build Status] ( https://badgen.net/circleci/github/posva/vue-compose-promise )] ( https://circleci.com/gh/posva/vue-compose-promise ) [ ![ npm package] ( https://badgen.net/npm/v/vue-compose-promise )] ( https://www.npmjs.com/package/vue-compose-promise ) [ ![ coverage] ( https://badgen.net/codecov/c/github/posva/vue-compose-promise )] ( https://codecov.io/github/posva/vue-compose-promise ) [ ![ thanks] ( https://badgen.net/badge/thanks/♥/pink )] ( https://github.com/posva/thanks )
2
2
3
- > Some awesome description
3
+ > Easily manipulate Promises and their state in Vue
4
+
5
+ ** Depends on [ @vue/composition-api ] ( https://github.com/vuejs/composition-api ) **
4
6
5
7
Demo (TODO link)
6
8
@@ -12,10 +14,51 @@ npm install vue-compose-promise
12
14
13
15
## Usage
14
16
17
+ ``` vue
18
+ <template>
19
+ <div>
20
+ <span> Is the promise still pending: {{ usersPromise.isPending }} </span>
21
+ <span> Is the 200ms delay over: {{ usersPromise.isDelayOver }} </span>
22
+ <span>
23
+ Last succesfully resolved data from the promise: {{ usersPromise.data }}
24
+ </span>
25
+ <span> Error if current promise failed: {{ usersPromise.error }} </span>
26
+ </div>
27
+ </template>
28
+
29
+ <script>
30
+ import { createComponent } from '@vue/composition-api'
31
+ import { usePromise } from 'vue-compose-promise'
32
+
33
+ export default createComponent({
34
+ setup() {
35
+ const promised = usePromise({ pendingDelay: 200, promise: fetchUsers() })
36
+
37
+ return {
38
+ usersPromise: promised.state,
39
+
40
+ fetchUsers() {
41
+ promised.state.promise = fetchUsers()
42
+ },
43
+ }
44
+ },
45
+ })
46
+ </script>
47
+ ```
48
+
15
49
## API
16
50
51
+ ### ` usePromise<T>(options?: { pendingDelay?: number | Ref<number>; promise?: Promise<T> | Ref<Promise<T>> }) `
52
+
53
+ - ` options `
54
+ - ` pendingDelay ` : amount of time in _ ms_ that should be wait whenever the a new promise is pending. This allows delaying the display of a loader to avoid flashing the screen. Can be a _ reactive_ property.
55
+ - ` promise ` : initial promise. Can be null. Can be a _ reactive_ property.
56
+
17
57
## Related
18
58
59
+ - [ vue-promised] ( https://github.com/posva/vue-promised )
60
+ - [ @vue/composition-api ] ( https://github.com/vuejs/composition-api )
61
+
19
62
## License
20
63
21
64
[ MIT] ( http://opensource.org/licenses/MIT )
0 commit comments