Nuxt.js Hadling data & Vuex-3

1. asyncData()

asyncData() { 

 return {}

}

 asyncData는 server에서 작동한다.(? client에서는 작동 안 하나??) 이건 page에서만 사용 가능하다.(layout이나 component에서 쓰면 작동 안 한다.)

이게 작동하고 난 후에 페이지가 렌더링 된다. 

 다시 말해 페이지 먼저 렌더링 된 후에 데이터를 뿌리는 형태가 아니라는 것이다. 따라서 asyncData 안에서 this로 method나 data에 접근 불가능하다. asyncData는 component가 생성되기 전에 작동하기 때문이다. 

 

이렇게도 사용한다. 

asyncData({redirect}){

redirect()

}

2. asyncData on Client & Server

asyncData는 처음 페이지를 로딩할 때(새로고침 or 처음 진입 시)만 서버에서 데이터를 가져오고(따라서 console.log 찍어도 터미널에 보이지 개발자 도구에는 처음에 안 보인다.) 그 외에(로고 클릭해서 홈으로 가기, nuxt-link를 통해 페이지 이동하기, router.push)등을 통해 다른 곳 갔다가 mainPage로 다시 돌아오면 asyncData는 서버에서 데이터를 불러오지 않는다. client단에서 동작할 뿐이다.(따라서 개발자 도구의 console에 로그 보인다.) (SPA처럼 동작) - userExperience 향상해준다. 

 

1) context에 대해 자세히 

 asyncData(context, callback){

 console.log(context)

}

2) Adding Async Data to a Single Post(_id.vue 에서 호출할 때)

 

3. vuex, fetch() and nuxtServerlnit()

store 폴더 하위에 index.js 생성하고 여기에 mutation, actions, store 생성

fetch는 asyncData와 비슷하게 작동한다. 차이점은 asyncData는 data에 merge 하지만, store로 commit 한다. 

context.store.commit('setPosts', data.loadedPosts)

actions 안에 nuxtServerInit을 통해서 fetch 대신해서 쓸 수 있다. 

nuxtServerlnit는 서버에서 페이지가 처음으로 로딩될 때 동작한다. 

 

4. Promise, async 

https://prde.tistory.com/150

비동기 처리 및 콜백함수 -> Promise -> async와 await

5. Nuxt.js lifecycle

https://heewon26.tistory.com/304

Nuxt 정리 No.4 (Nuxt LifeCycle, nuxtServerInit 정리)

첫 번째로 Vuex store가 설치되어 있으면 nuxtServerInit가 서버에서 호출된다. (context이용가능) 

※ 사용할 수 있는 장소는 /store/index.js 뿐이므로 주의

두 번째로 RouteMiddleware로 페이지 컴포넌트들 랜더링 되기 전에 middleware가 다음의 순서로 호출된다. 

 1) Global - nuxt.config.js에 정의 되어있는 것

 2) Layout - layout에 정의되어 있는 것

 3) Page - page component들에 정의되어 있는 것

세 번째로 페이지 컴포넌트들이 랜더링 되기전에 dynamic  route parameter들 검사 validate()

네 번째로 asyncData()- merge with component data, fetch(context)- fetch data before rendering page - 매번 페이지 컴포넌트가 로딩되기 전에 호출된다. 

다섯 번째 created() : Vue instance가 생성될 때

created된 후에 또 fetch - 여기서 context는 못쓰고 this를 쓸 수 있게 됩니다

 

라이프사이클 훅(activated, deactivated,...)

https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html#updated

라이프사이클 훅 | Vue.js

6. fetch, asyncData 비교

https://heewon26.tistory.com/241

Nuxt 정리 No.3(middleware, fetch, asyncData)

asyncData 는 컴포넌트에 데이터를 셋팅하는 것을 목적으로 사용된다.

따라서 asyncData에 의해 반환된 값은 컴포넌트의 템플릿에서 접근이 가능하며 다음과 같이 이용가능하다.

그럼 fetch?는 fetch는 Vuex store에 데이터를 저장하는 것을 목적으로 사용됩니다.

따라서 asyncData 와 달리 컴포넌트에 값을 셋팅할 수 없으머, fetch 는 다음과 같이 이용할 수 있다.

 

그래서 fetch와 asyncData 어떻게 활용하는건가?

asyncData의 경우, 그 페이지에서 직접 api를 두드려 데이터를 취득하는 것을 목적으로 하고 있기 때문에 Vuex를 사용하여 공통화된 함수 등을 사용하지 않는다. 따라서 store에 저장하지 않은 데이터(계정 데이터나 테마 등의 정보는 localStorage 나 sessionStorage로부터 취득하는 것을 상정)를 사용하여 데이터 취득을 하고 싶을 경우에 사용하는 느낌? 인듯 싶다. 또한 asyncData 내에서 store 를 사용할 수는 있지만 getters 를 움직여 페이지로 데이터를 가져올 필요가 있다.

fetch의 경우 Vuex의 mutations를 직접 호출해 store에 값을 설정하고, 페이지에서 직접 store를 참조하기 위해 사용한다.

따라서 취득한 데이터의 가공이나 표시 방법을 store에 넣기 전에 모두 실시할 필요가 있다. 즉, 일단 store에 넣어 버린 데이터를 편집해 표시하는 것이 어렵다. 취득한 데이터를 완전히 페이지에서 가공하여 사용하는 느낌이다.

 

* fetch, asyncData 여기 자세히 나와있다.

https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#asyncdata%E1%84%8B%E1%85%B4-%E1%84%8B%E1%85%A6%E1%84%85%E1%85%A5-%E1%84%92%E1%85%A2%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%BC

Data Fetching | Cracking Vue.js