This repository has been archived by the owner on Apr 6, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
keyed-composables.vue
45 lines (40 loc) · 1.65 KB
/
keyed-composables.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script setup lang="ts">
const useLocalState = () => useState(() => {
if (process.client) { console.error('running usestate') }
return { foo: Math.random() }
})
const useStateTest1 = useLocalState()
const useStateTest2 = useLocalState()
const useLocalAsyncData = () => useAsyncData(() => {
if (process.client) { console.error('running asyncdata') }
return Promise.resolve({ foo: Math.random() })
}, { transform: data => data.foo })
const { data: useAsyncDataTest1 } = await useLocalAsyncData()
const { data: useAsyncDataTest2 } = await useLocalAsyncData()
const useLocalLazyAsyncData = () => useLazyAsyncData(() => {
if (process.client) { console.error('running asyncdata') }
return Promise.resolve({ foo: Math.random() })
}, { transform: data => data.foo })
const { data: useLazyAsyncDataTest1 } = await useLocalLazyAsyncData()
const { data: useLazyAsyncDataTest2 } = await useLocalLazyAsyncData()
const useLocalFetch = () => useFetch('/api/counter', {
transform: (data) => {
if (process.client) { console.error('running client-side transform') }
return data.count
}
})
const { data: useFetchTest1 } = await useLocalFetch()
const { data: useFetchTest2 } = await useLocalFetch()
const useLocalLazyFetch = () => useLazyFetch(() => '/api/counter')
const { data: useLazyFetchTest1 } = await useLocalLazyFetch()
const { data: useLazyFetchTest2 } = await useLocalLazyFetch()
</script>
<template>
<pre>
{{ useStateTest1 === useStateTest2 }}
{{ useAsyncDataTest1 === useAsyncDataTest2 }}
{{ useLazyAsyncDataTest1 === useLazyAsyncDataTest2 }}
{{ useFetchTest1 === useFetchTest2 }}
{{ useLazyFetchTest1 === useLazyFetchTest2 }}
</pre>
</template>