vueで作るアプリが肥大化していく

Question

複数の機能を持つサイトで、vueのdataや記述が肥大化していき、管理しづらくなる

例：
・ajaxでデータをリクエストする機能
・帰ってきたデータに合わせてページネーションを実装する機能
・パラメーターを読んで適した表示をする
・etc

など機能が増えるごとにvueの記述？インスタンス？が肥大化していく。特にdataやcomputedで定義した変数が増えていき、収取がつかなくなる。

求めること
現状 App = new Vue({…}) ひとつで完結しているものを

App = new Vue({…})
Pagenation = new Vue ({…})
…
のように機能ごとに分けたい（？）、またはdataやcomputedなどを機能ごとに小分けにしたい。

例
https://codesandbox.io/s/vue-pagenation-osiio?file=/script.js
⇨script.js　全ての機能がappにベタガキされているのをもっとスマートにしたい

何かいい方法や、普通はこうするよ、こういう概念があるから調べなさい、等々アドバイスいただけると幸いです。

Answer 1

vue.jsを採用しているOSS検索結果
https://github.com/search?q=language%3Avue&ref=simplesearch

大概はsrc/components/辺りにコンポーネントがまとめられています。
それをsrc/pages辺りにあるページ用のコンポーネントから読み込んで使っている感じです。

Comments

[Yusuke_m25]

ありがとうございます。Gitで他の人のコードを見るということをしたことがなかったので新鮮でした。ああ勉強方法を知りました...

私のvueはcdnで、１つの.jsファイルにかかざるを得ないのですが、その中でもコンポーネント化して行って見やすくしていけそうな気がしました。
.vueファイルを使えたらより便利になりそうですが、現状すぐには使えなさそうなので、jsファイルの中でのコンポーネント化で整理整頓してみます！ありがとうございました。

[175]

お役に立てたようで何よりです！

Answer 2

普通は部品単位でコンポーネント化しますね。
https://jp.vuejs.org/v2/guide/components.html