【Nuxt】ページとコンポーネントの関係と管理について

nuxtを書いていって、ある程度まとまったのでメモとして。

結論

• ページ → コンポーネント間のデータの受け渡しはvuexのstateを用いる。
• propsでも渡せるがコンポーネント内でコンポーネントを更に読み込むケースもあるため、バケツリレーになってしまう。
• コンポーネントはvuexのstateを参照する。コンポーネント内でデータをfetchしない。
• 読み込み順の制御はページで行う。

基本

ページ

• /page配下
• ページ全体の表示に必要なHTML・CSS・JSが入っている
• コンポーネントを読み込むこともできる

コンポーネント

• /components配下
• ページ上で使うパーツファイル
• そのコンポーネントを表示するために必要なHTML、CSS、JSのみが格納されている
• コンポーネント内で更にコンポーネントを読み込むことも可能

ページからコンポーネントへのデータの受け渡し

2パターンある。

1. vuexのstateを使う
2. propsを使う

単純なのは2だが、propsの定義が必要・バケツリレーが発生するため基本的に1の形式に統一したい。
（のだが適切に使い分けるべき。後述）

コンポーネント内でAPIコールをしない理由

• コンポーネント間の読み込み順の制御ができない
• 認証を通った上で読み込みが必要な場合にその順番の制御ができない

なので、コンポーネントはあくまでも渡されたデータ、stateで管理されたデータの表示のみを行うべき。
APIコールの処理はページで行い、順番を適切に制御する。

破綻するケース

• 全部storeに寄せすぎるとstoreの肥大化を招いて破綻する。
  • storeは結局グローバル変数と変わりない。
• 保持する必要の無いデータはstoreを使わずpropsで適切に使ったほうが良い
  • パフォーマンス的にもデータ管理的にも。

制約がない故に

その気になれば、コンポーネント側でデータを取り寄せ、ページ側ではstateを使う、といったスタイルに統一することも出来るし、
コンポーネント側でデータをロードすることもあれば、ページ側で行ったり、バラバラにすることもできる。
いくらでもできる。

なので、基本を決めておいて、「例外的にここではこうしている」といったコメントを残した上でコードを書いていくと、
メンテナンスの際にコードが追いやすり、変更もしやすくなると思った。