Nuxtjs: 페이지 헤더에 데이터를 표시하는 가장 좋은 방법

Nuxtjs: 페이지 헤더에 데이터를 표시하는 가장 좋은 방법

SSR 목적으로 Nuxt.js를 사용하기 시작했습니다.헤더에는 서버 측에서 요청해야 하는 네비게이션 메뉴가 있습니다.

여기 있습니다default.vue

<template>
  <div>
    <app-header></app-header>
    <nuxt />
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
export default {
    components: {
    'app-header': Header,
    'app-footer': Footer,
    }
}
</script>

그럼, 어떤 방법이 가장 좋은가?items모든 페이지에서 요청을 보내는 것을 방지할 수 있습니까?이 데이터를 저장하기 위해 Vuex를 사용하려고 합니다.하지만 그게 좋은 해결책인지 아닌지는 모르겠어요.

Vuex를 사용하여 스토어 내에서 네비게이션 바 항목을 신고할 수 있습니다.

state: {
  navbarItems: [] 
},
mutations: {
  FETCH_ITEMS(state, navbarItems) {
    state.navbarItems = navbarItems
  }
},
actions: {
  fetchItems({ commit })  {         
    Vue.http.get("your api here ") // or axios
    .then((response) => {
        commit("FETCH_ITEMS", response.body);
    })
    .catch((error => {
        console.log("error")
    }))
}

And inside your header
created() {
  this.$store.dispatch("fetchItems")     
}

감사합니다.

언급URL : https://stackoverflow.com/questions/54479519/nuxtjs-best-way-to-show-data-in-page-header