<template>
  <div>
    <h2>fk</h2>
    <!-- <button @click="$fetch">Refresh</button> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },

//     async fetch() {
//   const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.name}`)
//                      .then((res) => res.json())
//                      console.log(post)

//   if (post.id === this.$route.params.id) {
//       this.post = post
//     } else {
//       // set status code on server and
//       if (process.server) {
//         this.$nuxt.context.res.statusCode = 404
//       }
//       // use throw new Error()
//       throw new Error('Post not found')
//     }
// }

    async fetch() {
      this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
      console.log(posts)
    },
    fetchOnServer: false,
    // multiple components can return the same `fetchKey` and Nuxt will track them both separately
    fetchKey: 'site-sidebar',
    // alternatively, for more control, a function can be passed with access to the component instance
    // It will be called in `created` and must not depend on fetched data
    fetchKey(getCounter) {
      // getCounter is a method that can be called to get the next number in a sequence
      // as part of generating a unique fetchKey.
      return this.someOtherData + getCounter('sidebar')
    }
  }
</script>

<style lang="scss" scoped></style>
