Nuxt.js入門

こんにちは。

業務でNuxtを使用するので、その入門として調べたことをアウトプットしてみます。

入門として、フォルダ構成・パス・Vuexについて簡単にまとめてみます。

1. Nuxt.jsとは

Nuxt.jsはVue.jsのフレームワークのことです。Nuxt独自の概念もありますが基本的にはVue.jsの知識がそのまま使えるので、Vueができればそう参入障壁も高くないように思えます。

Nuxtのメリットをいくつか挙げると、以下のものがあります。

1. SSRができる

2. PWAモジュールが使用できる

3. head要素の取得が容易にできる

4. ルーティングを自動設定してくれる

5. TSとの互換性

他にもありますが、Vue.jsをさらに強化したもので非常にサクサクと開発できるフレームワークです。

2. Nuxtのフォルダー構成

Nuxtプロジェクトを作成すると自動で必要なフォルダ、ファイルを作成してくれます。その種類と中身は下記の通りです。

.git	gitが使用するもの
.nuxt	Nuxt.jsのアプリケーションが生成されている。デフォルトでは作成されず、npm run dev実行時に生成される
assets	アプリケーションで使うスタイルシートやJavaScriptファイルなどを配置
components	コンポーネントファイルをまとめるフォルダ
layouts	レイアウトファイルを配置するフォルダ
middleware	ミドルウェアが配置されているフォルダ
node_modules	プロジェクトで使用するパッケージ類がまとめられたフォルダ
pages	各ページ用のファイルをまとめるフォルダ
plugins	プラグインのプログラムを配置するフォルダ
static	イメージファイルなどを保管するフォルダ
store	データを管理するためのファイルを用意するフォルダ
.editorconfig	エディター設定情報
nuct_config.json	Nuxt.jsの設定ファイル
package.json	パッケージ管理ファイル

この中でも最初はpages store assets staticフォルダをよく使用します。

3. デフォルトページの表示とパス

Nuxtプロジェクトを立ち上げると下記のように表示されるはずです。

Nuxtトップページ

こちらのページがどこから読み込まれるのかですが、こちらはpages/index.vueが元に表示されています。各ページのコンテンツはpagesフォルダーにまとめられており、ファイル名がそのままアドレスのパスになります。

例えば/a/a というアドレスのページを作成したいときは、pages/a/a.vueファイルを作成すれば、Nuxtがルーティングしてくれます。Vueの場合は、自身でルーターを設定する必要がありましたが、その必要がないのでNuxtは便利です。

そのためrouter-linkもタグを書くだけでaタグを作成できます。

(例)

<router-link to="/other">Go to other</router-link>

4. パラメーターの取得

ID等をGETで送信する場合にパラメーターをどのように取得するのかです。

例えば、http://〇〇/abc/パラメーターで値を送信したいときはpagesフォルダー内にabcというフォルダーを作成し、そこに_〇〇.vueという名前でファイルを用意します。xyzという名前でパラメータを受け取りたい場合は、_xyz.vueファイルを作成します。

パラメーターは$routeという変数のparamsプロパティ内にまとめられています。例えばxyzという名前でパラメータを送った場合は、下記で取り出すことができます。

this.$route.params.xyz

まとめると/id/passで値を取得したい時、/hanako/1 と送信するとid=hanako pass=1をthis.$route.paramsで取得することができる。

5. Vuex

nuxtにおけるVuexの利用方法は

1. storeフォルダにスクリプトを用意します。そしてstoreフォルダ内のスクリプトにより変数や必要な処理を用意します。

2. $storeを利用します。$storeにはVuexのオブジェクトが保管されており、この中から値などを取り出すことができます。

(例)

store/index.js

// Vuexという名前でオブジェクトを作成する
import Vuex from 'vuex';

const createStore = () => { 
 // Vuex.Storeというオブジェクトを作成する関数を定義。Vuex.StoreオブジェクトにVuexの情報をまとめて管理
  return new Vuex.Store({
  // state=Storeに保管する値を用意するために必要。componentのdataに似たもの。 
  state: function(){
   return { 
    message: 'This is store message!', 
    };
   },
  })
 } 
// export 他のファイルでimportすることでcreateStore関数が使用できるようになる(特別な記述は不要) 
export default createStore;

$storeの呼び出し(例ではmessageの中身を出力)

<p>{{$store.state.message}}</p>

5. mutation

コンポーネント側で$store.stateの値を直接書き換える操作は推奨されていない。そのため$store.stateの値操作を行いたいときは、ストア側で値の操作を行う。この操作にはミューテーションという機能を使う。

const createStore = () => {
    return new Vuex.Store({
        state: function(){
            return {
                message: 'This is store message!',
                counter: 0,
            };
        },
        mutations:{
            count(state) {
                                // カウントアップするmutation
                state.counter++;
            },
            reset(state) {
                                // リセットを実行するmitation
                state.counter = 0;
            }
        },
    })
}

ミューテーションの機能をコンポーネント側から呼び出すにはcommitメソッドを使用します。commitメソッドでは名前を指定する必要がある。

<div class="link" 
　　v-on:click="$store.commit('count')"
 　v-on:click.alt="$store.commit('reset')">
　<a>Clicked:{{$store.state.counter}}</a>
</div>

(例)

clickで$storeに設定されているmutationのcount関数を呼び出す。

click.altで$storeに設定されているmutationのreset関数を呼び出す。

ざっとですが以上になります。

axiosとか、CompositionAPI、その他Nuxtの機能は別記事にてまとめてみたいと思います！！

最後まで読んでいただきありがとうございました！！