前回のおさらいに、 をご確認ください。

リポジトリ下で進めています。

今回の結論

これといった結論はありません。

日々より良い、ニーズに合ったコンポーネント設計を訴求することを考えれば良いです。

基本的な設計原則

pages 下では画面ごとに index.vue を用意、それぞれの.vue で該当する Vuex モジュールにアクセスします。アクセス先である components 下では、 に記載されている通り、設計と実装を進めており相違は存在しません。

+ components
|-- atoms
|-- molecules
|-- organisms
|-- templates

MainTemplate をインポートすることで、基本的なレイアウトを共通化。 slot タグに、ページ固有の情報を入れます。入力フォームや、中小規模のコンポーネントを配置したりなど。

<main-template
    :loading="loading"
>
    <NewTip />
</main-template>

情報取得は pages に限定。

この pages でのみ、 API から情報を取得、 Vuex ストアにアクセスする。

適宜使用するコンポーネントに応じて props で値を受け渡し、各コンポーネントから渡される場合は $emit を使う。

import { mapActions } from 'vuex';
export default {
    computed: {
        ...mapActions('initTips')
    }
}

molues や organisms の違いって何でしょうと。

Nuxt を触っている人なら誰しもが首をかしげる箇所にハマりました。

現時点ではリポジトリ固有か否かで判定を行い、リポジトリ固有だった場合には organisms に入れています。