Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。

Nuxt.jsで静的サイト(universal + generate)を作っているときに、タイトルやディスクリプション、ページのキャッチワード等のクオリティを上げるために、EXCELにひとまとめして管理したい。~~提案のときにも便利。~~

なので、EXCELを変換した静的なjsonファイルをいろんな所で使えるようにしておく。

## １．Vuexで読み込んで使う。

Nuxt.jsで共通のデーターを使うならVuexが便利。ということで試してみる。

### storeを作成

Nuxt.jsは、[モジュールモード](https://ja.nuxtjs.org/guide/vuex-store/#%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)がお手軽に出来て最高。

```javascript:store/json.js
import jsonData from '~/assets/json/data.json'

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

// getters
export const getters = {
  getAll (state) {
    return state.json
  },
  ...
}
```

### 動作確認

```vue:pages/index.vue
<template>
<pre>{{ jsonAll }}</pre>
</template>

<script>
export default {
  asyncData ({ store }) {
    jsonAll: store.getters['json/getAll'],
  },
  ...
}
```

すんなり表示。試しに、`head()`へ読み込んで`generate`してみたが、ちゃんとtitleやdescriptionが反映されている。OK。

### おまけ

さらに、↓みたいな感じでgetterを増やしていけば、色んな所で活躍できる。Good。

```javascript:store/json.js
...
// getters
export const getters = {
  getAll (state) {
    return state.json
  },
  getPage: (state) => (name) => {
    return state.json.filter(el => el.name === name)
  },
  ...
}
```

## ２．サーバーサイドでも使いたいと言われた。

routingやsitemap生成とかにも使いたい~~かも~~。
ということで、nuxt.config.jsに「[fs](https://www.npmjs.com/package/fs)」を利用して読み込ませてみる。

### fsパッケージをインストール

nuxtには「fs」が入っていないのでパッケージをインストール。

```terminal:npm
npm i fs
```

### JSON.parseとfs.readFileSyncでjson読み込み。＆envに登録。

jsonファイルを読み込みつつ、envに登録することで色んな所で使えるようにする。

```javascript:nuxt.config.js
const fs = require('fs')
const jsonData = JSON.parse(fs.readFileSync('assets/json/data.json'))

module.exports = {
  env: {
    jsonData: jsonData,
  },
  ...
}
```

### 動作確認

```vue:pages/index.vue
<template>
<pre>{{ json }}</pre>
</template>

<script>
export default {
  asyncData () {
    json: process.env.jsonData
  },
  ...
}
```

こちらも問題なし。試しに`head()`へ読み込んで`generate`してみたが、ちゃんとtitleやdescriptionが反映されている。

### からの〜

env経由でStoreに渡してVuexで扱っても大丈夫。

```javascript:store/json.js

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

...
```

---

シンプルな内容に収まってとても満足したけど、結局、タイトルとかはjsonで管理しなかった落。

参考：

- [What is the best way to load json.](https://github.com/nuxt/nuxt.js/issues/123)
- [Vuex ストア](https://ja.nuxtjs.org/guide/vuex-store/)
- [NuxtのasyncDataで静的ファイルを読み込む](https://log.pocka.io/posts/nuxt-asyncdata-static-file-code-splitting/)

## Link

以下、公開中のnuxt.js(v2)関連の記事一覧

### 技術よりの記事

0. [nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)
0. [nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
0. [nuxt.js(v2)のベースURLをターミナルからコントロール](https://qiita.com/amishiro/items/7c7af250368083216d8e)
0. [nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)
0. [nuxt.js(v2)でIE11対応をする（CSS編）](https://qiita.com/amishiro/items/84b14108c749a0a0c966)
0. [nuxt.js(v2)でIE11対応をする（JS編）](https://qiita.com/amishiro/items/db37c6a56ddf7e214144)
0. [nuxt.js(v2)で絶対パス(https~)を取得する方法](https://qiita.com/amishiro/items/9d7ca6b239f604a40424) 
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい](https://qiita.com/amishiro/items/b7260116b282d2cf2756)
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす](https://qiita.com/amishiro/items/77e3c2546fa63cc69a62)
1. [Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。](https://qiita.com/amishiro/items/b09f9038ee3ebfee33d4)

### よく使うプラグインのお話

0. [nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。](https://qiita.com/amishiro/items/f2e302fedf03c3d0f79e)
0. [nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。](https://qiita.com/amishiro/items/f70aca4797cd57bc51b5)
0. [nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!](https://qiita.com/amishiro/items/ccca406a9bda1863ab01)
1. [nuxt.js(v2)へBuefyを入れた。全部入れでOKだった…嬉しい。](https://qiita.com/amishiro/items/eefc858539bc9af2a60a)

### まとめ系

0. [nuxt.js(v2)でgenerate納品する前にやっておきたい設定](https://qiita.com/amishiro/items/11bd642728f6b5838189)
0. [nuxt.jsにおける「components」ディレクトリの規約（案）](https://qiita.com/amishiro/items/c7493f5e9375a0609bdc)