Nuxtjs: лучший способ показать данные в заголовке страницы - PullRequest
Новая
       7

Nuxtjs: лучший способ показать данные в заголовке страницы

0 голосов
/ 01 февраля 2019

Я начал использовать Nuxt.js для целей SSR.В заголовке у меня есть меню навигации, пункты которого должны запрашиваться со стороны сервера.

Вот 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 для хранения этих данных.Но я не знаю, хорошее ли это решение или нет.

1 Ответ

0 голосов
/ 01 февраля 2019

Вы можете использовать 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")     
}

Спасибо

...