Question

我开始使用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来存储此数据。但是，如果这不是一个好的解决方案，我就不知道。

Answer 1

您可以使用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")     
}

谢谢

Nuxtjs：在页眉中显示数据的最佳方法

1 个答案: