Nuxt.js Tips

※ 随時更新予定

# 目次
* [概要](#概要)
* [環境構築](#環境構築)
* [機能](#機能)
* [Tips](#tips)


# 概要
Vue.jsをベースに、更に色々な機能を取り揃えたフレームワーク。
SPA、SSR、Vue Router+自動ルーティング、Vuex、デフォルトテンプレート等の機能がある。
Vue CLIよりも使いやすくなっている。簡単なSPAでもNuxtで作るのが最適解だと思う。


# 環境構築
create-nuxt-appを使うのがベスト！下記の手順で基本的にok

1. npm i -g create-nuxt-app ※create-nuxt-appを準備していない時
2. npx create-nuxt-app アプリ名 ※各設定は必要に応じて選択。基本enterでok。
3. デフォルトの画像やコンポーネントを削除し、環境の準備完了


# 機能
* vue-router標準装備で、なおかつpageディレクトリに配置したファイルを元に自動ルーティングを行ってくれる。
* vuex標準装備で、this.$storeでアクセス可能。
* axiosやbootstrapもインストールの時に設定することで、this.$axiosのような形で利用が簡単。
* Express.jsの利用も視野に入れられているため、サーバサイドJSも組み込みやすい。


# Tips
## ルーティングのルール
pagesディレクトリ内で任意のディレクトリとindex.vueを作成することで、自動的にルーティングが作成される。  
  
例1:） page1/index.vue を作成  
`npm run dev` を実行
localhost:3000/page1/ にアクセスできる。
  
例2:） page1/_id.vue を作成  
`npm run dev` を実行
localhost:3000/page1/(任意の値) にアクセスできる。  
※ (任意の値)部分は、**this.$route.params.id** で取得可能
※ asyncDataで利用する場合は、 **context.route.params.id**

## Vuex(Store)は、モジュールモード推奨
まず、Vuexとは、コンポーネント間でやり取りする共通の値や処理をまとめてあるもので、コンポーネントのどこからでも利用可能です。  
モジュールモードとは、store ディレクトリ内のすべての *.js ファイルが 名前空間付きモジュール に変換されます（index はルートモジュールとして存在します。）  
index内で、名前空間を分ける従来の書き方は廃止される様です。  
  
例:)store/namaekuukantest.jsというファイルを作り、stateにアクセスする場合   
this.$srore.state.**namaekuukantest**.プロパティ名 になります。

## Vuex(Store)のモジュールのテンプレート
state, getters, mutations, actionsが基本構成です。  
  
state → 共通で利用する値を保持する役割。
getters → stateの値を取得する役割。コンポーネントのcomputedで利用しやすい。
mutations → stateの値を変更する役割。コンポーネントから直接実行するかactionsから利用。
actions → 通信処理で値を取得したり、複雑な共通処理を行ったりする役割。

```js
export const state = () => ({
  list: {},
  targetId: '',
})


export const getters = {
  getList(state) {
    return state.list
  },
  getTargetId(state) {
    return state.targetId
  },
  getListById(state){
    return state.list[state.targetId] || {}
  },
}


export const mutations = {
  setList(state, register) {
    state.list = register
  },
  setTargetId(state, id) {
    state.targetId = id
  },
}


export const actions = {
  async getAll({commit}) {
    const res = await this.$axios.$get('/api/register/all/')
    commit('setList', res)
  },
  async getById({commit}, id) {
    const res = await this.$axios.$get(`/api/register/${id}`)
    return res
  }
}
```

## コンポーネントからVuexの値を参照する場合

### 直接参照する場合

```js
this.$store.state.モジュール名（ファイル名）.stateに記述したプロパティ
```

### gettersを利用する場合  
- script部でvuexを読み込みmapGettersを利用する  

```js
import { mapGetters } from 'vuex'
```  
  
- computedでgettersを取得  
※記述はgetListというゲッターをlistという名前で利用する場合

```js
computed: {
  ...mapGetters({
    list: 'モジュール名（ファイル名）/getList'
  })
}
```

## 異なるコンポーネントで、共通のmethods等を利用したい場合
mixin を利用しましょう！

1.分かりやすい様にNuxtプロジェクトの直下に **mixins** というディレクトリを作成する。
2.作成したいmixinファイルを作成する。  
例： mixins/InputValidation.js を作成

```js
export const InputValidation = {
  methods: {
    isEmpty(str) {
      return str === "" || str === undefined || str === null
    },
    isLength(length, str) {
      const validStr = String(str)
      return validStr.length > length
    }
  }
}
```

3.mixinを利用するコンポーネントファイルのscript部でimportする

```js
import { FileEvaluableImage } from '@/mixins/FileEvaluableImage' 
```

4.mixins という項目を作成し、利用するmixinを指定する。

```js
export default {
  mixins: [ FileEvaluableImage ],
  ...
}
```

## どのファイルからでも参照可能なutilを作成する方法
1.pluginsディレクトリにutils.jsを作成（名前はなんでもok）
2.nuxt.config.jsのpulginsに下記を記述する。

```js
plugins: [
  '@/plugins/utils'
],
```

3.utils.jsに共通で利用したい処理を記述する。

```js
const deepCopy = (obj) => {
  return JSON.parse(JSON.stringify(obj))
}

export default ({}, inject) => {
  inject('deepCopy', deepCopy)
}
```

4.実際に利用する時は、 this.$登録名で記述する。  

```js
this.$deepCopy(state.list)
```

## Nuxt.jsでapiを利用する
1.nuxt.config.jsの任意の場所に下記を記述する。

```js
serverMiddleware: [
  '~/api/'
],
```

2.api/にindex.jsを作成し、apiの設定を記述する。
（設定内容は、[Express.jsでミニマムなローカルサーバ構成](https://qiita.com/high-G/items/61ca9d22c6d66f8337dd)で説明）

## npm run devでローカルサーバを立ち上げた際に、他の機器からAPIにアクセスする場合
nuxt.config.jsに以下を記載。

```js
server: {
  port: (任意のポート番号),
  host: '0.0.0.0'
},
```

ただし、アクセスする際は、 `http://localhost:ポート/api/○○` でアクセスする。