Nuxt fetch() 컴포넌트 데이터가 업데이트가 안돼요

Nuxt2에서 아래와 같이 fetch 속성을 사용하려고 하였는데, 컴포넌트 데이터가 업데이트가 되지 않았습니다.

 async fetch({ $api }) {
    try {
      const { data } = await $api.getUserList();
	  this.list = data;
    } catch (e) {
      console.log('error', e)
    }
  },

 

원인

fetch는 nuxt 2.12 버전 이후로 업데이트가 되었습니다.

fetch hook을 사용하려면 fetch안의 파라미터를 넣으면 안됩니다.

파라마터를 넣으면, 업데이트 이전의 fetch가 동작해서 컴포넌트가 업데이트 되지 않습니다.

 

해결방법

fetch 파라미터를 지우고, this를 통해서 데이터 구성요소를 업데이트 하면 정상 작동합니다.

 async fetch() {
    try {
      const { data } = await this.$api.getUserList();
	  this.list = data;
    } catch (e) {
      console.log('error', e)
    }
  },

 

업데이트 된 fetch 기능을 사용하려면 반드시 파라미터를 지우고 사용해야합니다!

 

 

Nuxt asyncData / fetch 이란? 설명? 차이점? 언제 사용?