Nuxt/examples/use-state/app.vue

29 lines
773 B
Vue
Raw Normal View History

<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>
2021-10-11 17:48:03 +00:00
<template>
<NuxtExampleLayout :show-tips="true" example="use-state">
<div>Counter: {{ counter }}</div>
<div>
<NButton class="font-mono" @click="counter++">
+
</NButton>
<NButton class="font-mono" @click="counter--">
-
</NButton>
</div>
<template #tips>
<div>
<NLink href="https://v3.nuxtjs.org/docs/usage/state" target="_blank">
useState
</NLink>
is an SSR-friendly ref replacement.
Its value will be preserved after server-side rendering
and shared across all components using a unique key.
</div>
</template>
</NuxtExampleLayout>
2021-10-11 17:48:03 +00:00
</template>