Как правильно разделить компонент, хранилище и API запросы?

Question

[Олег Правдин]

Добрый день. В моем приложении используется хранилище Vuex и выделенный отдельно набор методов для запросов в API вида

export default {
    get() {return axios.get(....)},
}

При разработке приложений с использованием API я придерживаюсь следующего подхода:
1) Когда данные используются в одном компоненте или в рамках дочерних компонентов, я импортирую напрямую метод для выполнения запроса в API, вызываю его внутри mounted/created и храню данные в data компонента
2) Когда данные используются глобально, в created выполняется dispatch (где и выполняется API запрос), далее через mutator данные попадают в хранилище и используются в приложении через computed.

Вопросы:
1) Достаточно ли я абстрагируюсь от работы с запросами в п.1 (не нужна ли какая-то прослойка). В частности я видел подход с занесением всех API запросов в actions, часть из которых не влияют на state, а просто возвращают результат запроса в API
2) Есть ли какие-то фундаментальные косяки в моем подходе? Что-то делаю не так?
3) Где прописать хэндлер ошибок в API запросах?

Comments

[golentor]

Просто уточнение - Вы использовали в своём коде нечто подобное

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

Из докумментации axios ( github.com/axios/axios ) Handling Errors возможно то, что Вы искали
И ещё возможности store можно расширить через vuex-orm попробуйте эту технологию тоже.
Если что, я предпочитаю нечистый Vue. Удачи в-кодинге)

Answer 1

[Сергей delphinpro]

2. Мнение обратное Alex :
Я наоборот, предпочитаю все данные хранить в сторе. В компонентах только локальные переменные.
Все запросы к API расположены в экшенах и соответственно данные сразу кладутся в стор.
Обращение к стору только через геттеры. В компонент мапятся необходимые экшены и геттеры.

3. Перехват ошибок удобно делать в перехватчиках (interceptors) Axios. Конфигурируем опцию validateStatus нужным образом и ловим все в одном месте.

Comments

[Олег Правдин]

В чем профит хранения всех данных в сторе? В частности интересует пример, когда я загружаю для редактора полное содержимое какой-либо модели с зависимостями (т.е. она используется в таком виде гарантированно в одном месте)

[Сергей delphinpro]

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

Answer 2

[Alex]

1. Достаточно ли зависит от вашего случая. Скажем, есть вероятность, что нужно будет изменить один сервер АПИ на друго? Или в принципе изменить схему АПИ?
   
2. Что касается глобальных данных. Тут может быть по разному. Я придерживаюсь следующего подхода: каждый компонент должен сам загружать нужные ему данные. А во Vuex хранить поменьше. Тут нет какой-то четкой границы. Например можно вынести все операции по работа с апи во Vuex и использовать его как хранилище кэша. Но нужно ли? Не лучше ли сделать кэширование честью модуля по обращению к апи? Или, например, вам нужно хранить историю последних действий пользователя. Для этого, например, можно использовать IndexedDB API.
   
3. Как по мне, то в том месте, где выполняется обращение. То есть, компонент, который запрашивает какие-то данные (сквозь сколько угодно абстракций), должен получать либо данные либо отчет об ошибке и сам решать как его обработать.
   

Comments

[Олег Правдин]

1. Определенно нет :) Если бы была возможность, я бы 100% реализовал бы абстракцию
Ваш ответ мне понятен, спасибо большое :)