// 後で 'posts' キーを使用して同じデータにアクセスできます
const { data } = await useFetch('/api/posts', { key: 'posts' })

// posts.vue（親ルート）での useFetch のキャッシュ値にアクセス
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default() {
    // キャッシュから個々の投稿を見つけてデフォルト値として設定します。
    return posts.value.find(post => post.id === route.params.id)
  }
})

// 後で 'todos' キーを使用して同じデータにアクセスできます
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))

const newTodo = ref('')
let previousTodos = []

// todos.vue での useAsyncData のキャッシュ値にアクセス
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  return $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest () {
      // フェッチが失敗した場合に復元するために、以前のキャッシュ値を保存します。
      previousTodos = todos.value

      // 楽観的に todos を更新します。
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // リクエストが失敗した場合、データをロールバックします。
      todos.value = previousTodos
    },
    async onResponse () {
      // リクエストが成功した場合、バックグラウンドで todos を無効化します。
      await refreshNuxtData('todos')
    }
  })
}