[GNB카테고리] 화면노출

앞에서(1편) 값을 getters에 넣어줬다면 getters의 값을 가져와 화면에 노출시키는 작업을 해보고 마무리한다.

WHAT I AM GONNA DO

• 기능: API에서 응답받은 값들을 Header컴포넌트 페이지에 부쳐서 GNB카테고리 노출
• 작업: 컴포넌트에 값을 붙이는 작업
• 정리: fetch, helper함수

<template>
    <li v-for="(item, index) in gnbListKo" :key="index" class="header_bottom_center_link"> 
        <span :style="{ color: item.color, fontWeight: item.fontWeight }">{{ item.label }}</span>  
   </li>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  export default{
    async fetch () {
      await this.getGnbList(),
    },
    computed: {
      ...mapGetters('gnb', ['gnbListKo']),
    },
    methods: {
      ...mapActions('gnb', ['getGnbList']),
    }
  }
 <script>

헬퍼함수

import { mapGetters, mapActions } from 'vuex'

를 통해서 store에 정의한 getters, actions의 값들을 간단하게 사용할 수 있는 헬퍼함수 헬퍼함수

fetch

Nuxt REST API호출방식으로 SSR(렌더링) 동안 비동기 데이터 호출이 완료 되었을때 (async/await 사용) promise를 반환 fetch/asyncData

• fetch()로 methods > getGnbList를호출
• computed > gnbListKo 접근하여 li태그에 for문으로 돌려줌
• item.label로 데이터 바인딩을 통해 값을 노출