Структура приложения
В действительности Vuex не накладывает каких-то значительных ограничений на используемую структуру кода. Однако, он требует соблюдения нескольких высокоуровневых принципов:
Глобальное состояние приложения должно содержаться в глобальном хранилище;
Единственным механизмом изменения этого состояния являются мутации, являющиеся синхронными транзакциями;
Асинхронные операции инкапсулируются в действия или их комбинации.
Покуда вы следуете этим правилам, можно использовать любую структуру проекта. Если ваш файл хранилища становится слишком большим, просто начните выносить действия, мутации и геттеры в отдельные файлы.
Для любого нетривиального приложения скорее всего понадобится использование модулей. Вот пример возможной структуры проекта:
├── index.html
├── main.js
├── api
│ └── ... # абстракции для выполнения запросов к API
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # здесь мы собираем модули и экспортируем хранилище
├── actions.js # корневые действия
├── mutations.js # корневые мутации
└── modules
├── cart.js # модуль корзины
└── products.js # модуль товаров
Для справки можно использовать пример корзины покупок.