Nuxt/test/fixtures/basic/pages/json-payload.vue

35 lines
1.4 KiB
Vue

<script setup lang="ts">
const state = useState(() => shallowRef({} as Record<string, any>))
const nonDisplayedState = useState(() => shallowRef({} as Record<string, any>))
useState().value = '</scr' + 'ipt>'
if (import.meta.server) {
const r = ref('')
state.value.ref = r
state.value.shallowReactive = shallowReactive({ nested: { ref: r } })
state.value.shallowRef = shallowRef(false)
state.value.undefined = shallowRef()
state.value.reactive = reactive({ ref: r })
state.value.error = createError({ message: 'error' })
state.value.date = new Date()
nonDisplayedState.value.bigint = 0n
nonDisplayedState.value.bigintRef = ref(0n)
}
</script>
<template>
<div>
<pre>{{ state }}</pre>
Date: {{ state.date instanceof Date }} <br>
BigInt: {{ nonDisplayedState.bigint === 0n }} <br>
Error: {{ isNuxtError(state.error) }} <hr>
Shallow reactive: {{ isReactive(state.shallowReactive) && isShallow(state.shallowReactive) }} <br>
Shallow ref: {{ isShallow(state.shallowRef) }} <br>
Undefined ref: {{ isRef(state.undefined) }} <br>
BigInt ref: {{ isRef(nonDisplayedState.bigintRef) && typeof nonDisplayedState.bigintRef.value === 'bigint' }} <br>
Reactive: {{ isReactive(state.reactive) }} <br>
Ref: {{ isRef(state.ref) }} <hr>
Recursive objects: {{ state.ref === state.shallowReactive.nested.ref }} <br>
</div>
</template>