【Nuxt.js】JSONファイルを読み込み共通データ作成する

Nuxt.js、VuetifyでWebサイトを作成していたときにグローバルナビやフッターナビなど同じ項目で流用でき、まとめておくようなデータを作成できないかと思いました。

下記にそのときの方法をまとめてみました。

グローバルナビを作成

Headerにグローバルナビを設置するとき下記のように配置していました。

header.vue

<template lang="pug">
v-app-bar
  v-layout
    v-btn(href="about") about
    v-btn(text href="case") case
    v-btn(text href="price") price
    v-btn(text href="help") help
    v-btn(text href="information") information
</template>

この形でも表示されるのですが、フッターにも同じメニュー」を並べたり、他にも流用して使えないかとおもいました。

JSONデータの作成

まず流用できるデータとしてこのようなJSONデータを作成します。

menu.json

[
  { "id": 1,
    "category": "about",
    "link": "about"
  },
  { "id": 2,
    "category": "case",
    "link": "case"
  },
  { "id": 3,
    "category": "price",
    "link": "price"
  },
  { "id": 4,
    "category": "help",
    "link": "help"
  }
  { "id": 5,
    "category": "information",
    "link": "information"
  }
]

JSONデータの読み込み

JSONを読み込み表示させるだけなら下記のような書き方で表示することができます。

header.vue

<template lang="pug">
  v-app-bar
    v-layout
      v-btn(v-for="(menu, index) in menus" v-bind:key="menu.id" :href="menu.link") 
        | {{ menu.category }} 
</template>

<script>
import menus from '@/assets/json/menu.json'

export default {
  data () {
    return {
      menus: menus
    }
  }
}
</script>

Vuexを使用する

Nuxt.jsで共通データを作成するならVuexを利用すると便利なので使っていきます。

Storeにデータを作成

Storeにmenu.jsonを読み込ませていきます。
Nuxt.js ではstoreディレクトリ内にモジュールと対応するファイルを持つことができます。
モジュールモード

store/json.js

import jsonData from '@/assets/json/menu.json'

// 状態の管理
export const state = () => ({
  data: jsonData,
})

// getters
export const getters = {
  getAll: (state) => {
    return state.data
  },
}

gettersはこのように増やしていくことも可能です。

export const getters = {
  getAll: (state) => {
    return state.data
  },
  getAll2: (state) => {
    return state.data2
  },
}

共通データを呼び出す

先程作成したデータを表示さえたいファイルに下記のように書き込みます。
mapGettersで呼び出し、v-forで繰り返し表示させます。

header.vue

<template lang="pug">
  v-app-bar
    v-layout
      v-btn(
        v-for="(menu, index) in getAll"
        v-bind:key="menu.id"
        :href="menu.link") 
        | {{ menu.category }} 
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      getAll: 'json/getAll',
    }),
  },
}
</script>

これで最初に書いたメニューと同じ表示になります。
また、このデータを流用しほかの部分でも使うことが可能になりました。