/
payload.vue
68 lines (65 loc) · 1.65 KB
/
payload.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script setup lang="ts">
definePageMeta({
icon: 'carbon-data-set',
title: 'Payload',
category: 'analyze',
shouldShow: () => !!useClient().value,
order: 7,
})
const client = useClient()
const payload = computed(() => client.value?.nuxt.payload)
async function refreshData(keys?: string[]) {
await client.value?.nuxt.hooks.callHookParallel('app:data:refresh', keys)
}
</script>
<template>
<div v-if="client">
<NSectionBlock
icon="carbon-data-set"
text="State"
description="Keyed state from `useState`"
:padding="false"
>
<StateGroup
:state="payload.state" prefix="$s"
/>
</NSectionBlock>
<NSectionBlock
icon="carbon-data-blob"
text="Data"
description="Keyed state from `useAsyncData`"
:padding="false"
>
<template #actions>
<NButton
n="xs primary" self-start
icon="i-carbon-recycle"
@click="refreshData()"
>
Re-fetch all data
</NButton>
</template>
<StateGroup :state="payload.data">
<template #actions="{ isOpen, name }">
<NIconButton
v-if="isOpen && name"
:title="`Re-fetch '${name}'`"
icon="carbon-recycle"
@click="refreshData([name])"
/>
</template>
</StateGroup>
</NSectionBlock>
<NSectionBlock
v-if="payload.functions && Object.keys(payload.functions).length"
icon="carbon-function"
text="Functions"
description="State for functions (experimental)"
>
<StateEditor
ml--6
:state="payload.functions"
/>
</NSectionBlock>
</div>
</template>