@seo-maru  2020/11/10更新

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のアドオンを使うと便利。



タイトルとURLをコピーしました