Help us understand the problem. What is going on with this article?

【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を使う、といったスタイルに統一することも出来るし、
コンポーネント側でデータをロードすることもあれば、ページ側で行ったり、バラバラにすることもできる。
いくらでもできる。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした