Я вижу много проектов Vue.js, использующих эту структуру:

├── main.js
├── api
│   └── index.js
│   └── services           #containing files with api-calls
│       ├── global.js
│       ├── cart.js
│       └── messages.js
├── components
│   ├── Home.vue
│   ├── Cart.vue
│   ├── Messages.vue
│   └── ...
└── store
    ├── store.js
    ├── actions.js  #actions to update vuex stores
    ├── types.js
    └── modules
        ├── global.js
        ├── cart.js
        └── ...

(Пример с такой структуройJackblog».)

Так, например,Cart.vue хочет обновитьinCart данные в Vuex. Для этого Корзина импортируетactions.js:

import { inCart } from '../../store/actions'

actions.js импортирует APIindex.js поэтому он может подключиться к API. А затем он обновляет значения в магазине Vuex.

Итак, это для меня ясно. Но теперь я хочу работать надMessages.vue модуль. Этот модуль должен также подключаться к API, чтобы получать все сообщения, но нет необходимости сохранять результаты в Vuex. Единственный компонент, которому нужны данные, - это само Messages.vue, поэтому они должны храниться в компоненте.data() только.

Вопрос: Я не могу импортироватьactions.js внутриMessages.vue потому что действие не должно обновлять Vuex. Но я не могу пошевелитьactions.js кapi каталог, потому что это нарушает логику помещения всех файлов, которые добавляют данные, в хранилище в каталог-хранилище. Кроме того, логика должна быть размещена внутриMessages.vue, Например, когда API возвращает ошибку, локальныйerror-константа должна быть установлена. Поэтому он не может быть обработан отдельным файлом.

Какова рекомендуемая структура приложения для выполнения вызовов API и сохранения их в Vuex или локальномdata()? Где разместить файл действий, файлы API и так далее? При рассмотрении примера Jackblog он поддерживает только данные Vuex. Как реструктурировать это, чтобы поддержать оба?