Nuxt.js要点まとめ
フォルダ構成
pagesメインのvueファイル
componentsコンポーネントlayoutsレイアウトのベースとなるファイル(default.vue)を格納nuxt.config.jsヘッダーやその他設定を定義する assets画像などを配置 staticNuxtの制御外の静的ファイルルーティング
pagesフォルダ配下に設定したファイル名で自動ルーティングされる。
動的URL
/books/1 のように動的なURLの場合は、
/books/_id のようにファイルの先頭にアンダーバーをつけると、
以下のパラメーターのように受け取りができる
{{ $route.params.id }}
複数の動的パラメーターを受け取りたい場合はフォルダにもアンダーバーをつける。
/books/_category/_id
Nuxtにおけるモジュールとプラグインの違い
モジュール.. Nuxtの拡張ツール。公式や野良モジュールがある。
プラグイン.. Nuxtとは直接関係ないが、Nuxtに組み入れて使えるツール。
Vue.js
算出プロパティ(computed)
通常のメソッドと違い、computedはキャッシュされる
https://jp.vuejs.org/v2/guide/computed.html
ライフサイクル
mounted, updatedなど、イベントリスナーみたいなやつ。https://qiita.com/japboy/items/b67bae0bac1aeefb2680
Vuex(データストア)
Vuexを使用。
storeフォルダの下にstateの定義ファイルを置く。
Vuex入門
https://vuex.vuejs.org/ja/guide/
ストアの基本
"ストア" は、基本的にアプリケーションの 状態(state) を保持するコンテナです。
ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。
これによって、全ての状態の変更について追跡可能な記録を残すことが保証されます。
通常、アプリケーションごとに1つしかストアは持たない。
デバッグ
Vue.js devtools と言うChromeのアドオンを使うと便利。