## 背景
[[Nuxt]]の`pages`配下のページを切り替えたとき、各ページの状態(state)は都度初期化されてしまうが、状態を保持したい。
## やり方
`<NuxtPage>`タグに`keepalive`属性を指定する。
```html
<NuxtPage keepalive />
```
これは[[KeepAlive]]でwrapするのと同じ効果がある。
https://nuxt.com/docs/guide/directory-structure/pages#keepalive
## 具体例
`Hello`ボタン、`Bye`ボタンを押すとページが切り替わる`app.vue`。
`app.vue`
```html
<template>
<div>
<NuxtLink to="./hello">
<button>Hello</button>
</NuxtLink>
<NuxtLink to="./bye">
<button>Bye</button>
</NuxtLink>
</div>
<div>
<NuxtPage />
</div>
</template>
```
`+`ボタンを押すとカウントが加算されていくが、ページが切り替わると元に戻る`Hello.vue`と`Bye.vue`。
`pages/Hello.vue`
```html
<script setup lang="ts">
const count = ref(0);
</script>
<template>
<h1>Hello {{ count }}</h1>
<button @click="count++">+</button>
</template>
```
`pages/Bye.vue`
```html
<script setup lang="ts">
const count = ref(0);
</script>
<template>
<h1>Bye {{ count }}</h1>
<button @click="count++">+</button>
</template>
```
`app.vue`を以下のように変更すればOK。
`app.vue`
```diff
<template>
<div>
<NuxtLink to="./hello">
<button>Hello</button>
</NuxtLink>
<NuxtLink to="./bye">
<button>Bye</button>
</NuxtLink>
</div>
<div>
- <NuxtPage />
+ <NuxtPage keepalive />
</div>
</template>
```