Nuxt에서 API 호출 리팩토링

오늘 Nuxt에서 head 속성을 만들고 싶었을 때 asyncData()를 사용하여 API 데이터를 가져올 때 이 속성에 액세스할 수 없다는 것을 깨달았습니다.

API에서 가져온 데이터를 head 태그에 사용해야 하는 경우 문제가 발생하여 문서를 좀 더 살펴보았습니다.

Nuxt의 API에서 데이터를 가져오는 가장 좋은 방법은 the fetch() hook 입니다!

말이된다.

리팩토링한 후 내 스크립트 태그가 훨씬 더 깨끗해 보이고 기본 레이아웃의 구성 요소에 the keep-alive attribute이 설정되어 페이지 변경이 훨씬 빨라졌습니다.

홈 페이지 구성 요소 스크립트 태그는 현재 다음과 같습니다.

export default {
  data () {
    return{
      home: {},
      posts: [],
      projects: []
    }
  },
  async fetch() {
    this.home = await this.$axios.$get("/home-page")

    this.posts = await this.$axios.$get("/posts?_limit=4")

    this.projects = await this.$axios.$get("/projects?_limit=2")
  },
   head() {
      return {
        title: this.home.title,
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: 'description',
            name: 'description',
            content: this.home.meta_description
          }
        ]
      }
    },
    fetchOnServer: true
}