Nuxt.jsでのpagesからlayoutsへのデータの受け渡しについて

Question

こんにちは、
タイトルの通りですが、現在以下の実装を実現しようとしていて方法を探しています。
具体的なコード等はまだないのですが、実現方法でアドバイスいただけたら大変助かります。

前提・実現したいこと

pages/index.vueでcurrentRouteを取得し、index.vueで適用しているlayoutsの中のcomponentに渡したいと思っています。
まだvueに関して深く理解ができていないのですが、index.vueでvuexのstoreにデータ（currentRoute）を入れ、componentで呼び出すという手法が一般的なのでしょうか？
また、他に方法等ありましたらアドバイスいただけますでしょうか？

初歩的な質問で申し訳ないのですが、ご回答いただけますと幸いです。

試したこと

index.vueからlayoutを介さないcomponentへのデータの受け渡しは以下の方法で確認できました。

1. index.vue, componentでslotを設定。
2. index.vueのslotのデータ属性としてcurrentRouteの値を収納。
3. componentでgetElementByIdでエレメントを取得し、取得した値にdataset.xxxでdata(currentRoute)を取得

ただ、上記の方法はlayoutを介するしていない上、回りくどいやり方をしていると思います。
改善の方法等ありますでしょうか？

よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

"nuxt": "^2.4.2"
"vue": "^3.2.1"

Answer 1

別々のコンポーネントで共通のデータを参照する場合は、storeを用いるのが一般的と思います。

VueやReactなど、仮想DOMを利用したフレームワークでは、実際のDOMのレンダリングはフレームワークにコントロールされるため、getElementByIdを使ってレンダリングされたDOMからデータを取得するのは、再現しづらいバグを生む可能性もあるのでお勧めできません。

具体的なコードができましたら、掲示していただけると回答を得やすいと思います。

Comments

[aa316316]

> noka_blankさん
ご回答ありがとうございます！
やはり、storeを使うのが一般的なのですね。とても分かりやすい説明ありがとうございます！
vuexを使う方向で、もしコードができましたら追加させていただきます。
ありがとうございます！

[noka_blank]

自分の環境はReactですが、直近で実DOMを変更して痛い目を見ましたので、、、^^;
ぜひ色々な方の意見を集めてご判断いただければと思います。