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

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

Для справки, ознакомьтесь с примером Корзина покупок (opens new window).