Vuex, лучшая практика с глобальной ошибкой и обработкой уведомлений

Question

вот что я делаю, и я не совсем уверен, что это правильно:

//store
async addUser({commit}) {
  try {
    const {data} = await apiService.addUser()
    commit('SET_USER', data)
    commit('SET_NOTIFICATION', {type:'success', message: 'user successfuly created'})
  } catch (error) {
    commit('SET_NOTIFICATION', {type:'error', message:error})
  }

}

SET_USER(state, user) {
    state.users.push(user)
}

//my component:
async addUser() {
  this.isLoading = true
  await this.$store.dispatch('updatePatient', this.form)
  this.isLoading = false
}

это законно?

иногда я думаю, что мне нужно больше логики внутри моего компонента, в зависимости от успеха или отклоненного запроса API. Должен ли я положить всю логику в моих действиях? как я сейчас?

Может быть, я должен добавить состояние статуса для каждого действия, например:

state {
  users: []
  postUserSuccess: null
  postUserError: false
  updateUserSuccess: null
  updateUserError: false
  // ...
}

и делать то, что я хочу в компоненте с вычисленным свойством, сопоставленным с хранилищем?

Что вы думаете?

Answer 1

Что ж, если мы хотим строго следовать правилам Vuex (и я предлагаю вам управлять этими правилами), мы должны соответствовать этому графику:
.
Компонентвызвать действие, действие сделать запрос и управлять запросом API и отправить одну (или несколько) мутаций.Мутации должны только изменять состояние, и тогда vue-компонент отобразит свойства состояния, сопоставленные в компоненте.
Это оптимальный способ использования Vuex.
Как только приложение становится все больше и больше, это может произойти (а затем рефакторинг, это боль), что действие может вернуть Promise, содержащий результаты API, но это нарушает поток Vuex и может привести к непредвиденным ошибкам.
Ваша реализация выглядит нормально, вместо добавления свойства состояния для каждого действия, которое вы должныпопытайтесь создать свойство ошибки общего состояния и правильно управлять им в соответствии с вашими потребностями.

Answer 2

Я не знаю, является ли это лучшей практикой, но я разрешил компонентам обрабатывать исключения. Этот метод имеет свои плюсы (вам не нужно загрязнять состояние управлением ошибками) и минусы (вы должны повторять код управления ошибками для каждого вызова действия).

1. Все сервисные звонки будут совершаться в действиях
2. Состояние будет устанавливаться только в мутациях.
3. Все сервисные вызовы будут возвращать обещание с разрешением (данные для загрузки в состоянии) и отклонением (сообщение об ошибке для представления).
4. Будет перехватчик, который отклонит ответ в случае пользовательской ошибки (здесь вы можете указать, если ответ содержит ошибку, отклонить ответ и отправить в качестве ошибки проп, теперь вам не нужно деконструировать ответ в действии).

Я приведу упрощенный пример (я использую axios, вы можете узнать, как это сделать с используемой вами библиотекой).

Действия в Vuex являются асинхронными. Так что вам не нужно пытаться / ловить их.

ApiService - Добавить пользователя

const addUser = () => {
    return new Promise((resolve, reject) => {
        axios
            .post(url, user)
            .then(response => resolve(response.data))
            .catch(error => reject(error));
    });
};

магазин

async addUser({commit}) {
    const data = await apiService.addUser();
    commit('SET_USER', data);
    return data;
}

если обещание в apiService.addUser разрешено, то будет выполнено принятие, если отклоненный axios вернет обещание, и вы можете отловить ошибку в компоненте, который вызывает действие.

Компонент

async addUser() {
    this.isLoading = true;
    try {
        await this.$store.dispatch('updatePatient', this.form);    
    } catch (error) {
        // here goes the code to display the error or do x if there is an error, 
        // sometimes I store an errors array in the data of the component other times I do  x logic
    }
    this.isLoading = false;
  }

Состояние Теперь ваше состояние станет чище, так как вам не нужно хранить там эти ошибки.

state {
  users: []
}