# アプリケーションの構造
Vuex は実際のところ、あなたがコードを構造化する方法を制限しません。もっと正確に言うと、それより高いレベルの原理原則を適用させます:
アプリケーションレベルの状態はストアに集約されます。
状態を変更する唯一の方法は、同期的に処理を行うミューテーションをコミットすることのみです。
非同期的なロジックはカプセル化されるべきであり、それはアクションによって構成されます。
これらのルールに従っている限り、プロジェクトをどのように構造化するかはあなた次第です。もしストアファイルが大きくなり過ぎたら、単純にアクションやミューテーション、ゲッターをそれぞれ別のファイルに切り出すことができます。
それなりに手の込んだアプリケーションであれば、モジュールを活用する必要が出てきそうです。プロジェクトの構造の例は以下のようになります:
├── index.html
├── main.js
├── api
│ └── ... # API 呼び出しを抽象化する
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # モジュールを集めてストアをエクスポートする
├── actions.js # アクションのルートファイル
├── mutations.js # ミューテーションのルートファイル
└── modules
├── cart.js # cart モジュール
└── products.js # products モジュール
参考として Shopping Cart Example (opens new window) をみてみるのもよいでしょう。