Структура приложения

Vuex не ограничивает способ структурирования вашего кода. Скорее, он навязывает ряд принципов высокого уровня:

1. Состояние приложения централизовано в хранилище.

2. Единственный способ изменить состояние — совершить мутации, которые являются синхронными транзакциями.

3. Асинхронная логика должна быть инкапсулирована и может быть составлена с помощью действий.

До тех пор, пока вы следуете этим правилам, структура вашего проекта зависит от вас. Если файл хранилища становится слишком большим, просто начните разделять действия, мутации и геттеры в отдельные файлы.

Для любого нетривиального приложения нам, вероятно, потребуется использовать модули. Вот пример структуры проекта:

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

В качестве справки, ознакомьтесь с примером Корзина покупок.