CODEWITHSUNDEEP
vuejs2vuexnuxt.js
Ali Rezaei
Ali Rezaei

Reputation: 123

Nuxtjs: Best way to show data in page header

I started to use Nuxt.js for SSR purposes. In the header I have a navigation menu which it's items should be requested from server side.

Here is 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>

So, what is the best way to fetch items and prevent sending request on every single page? I thought of using Vuex to store this data. But I don't if it's a good solution or not.

Upvotes: 1

Views: 1113

Answers (1)

Birante
Birante

Reputation: 709

You can use Vuex and declare your navbar items inside the store.

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")     
}

Thanks

Upvotes: 2

Related Questions