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

В действительности Vuex не накладывает каких-то значительных ограничений на используемую структуру кода. Однако, он требует соблюдения нескольких высокоуровневых принципов:

1. Глобальное состояние приложения должно содержаться в глобальном хранилище;

2. Единственным механизмом изменения этого состояния являются мутации, являющиеся синхронными транзакциями;

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

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

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

├── index.html
├── main.js
├── api
│   └── ... # абстракции для выполнения запросов к API
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # здесь собираем модули и экспортируем хранилище
    ├── actions.js        # корневые действия
    ├── mutations.js      # корневые мутации
    └── modules
        ├── cart.js       # модуль корзины
        └── products.js   # модуль товаров

Для справки можно использовать пример корзины покупок.