Vuex, 글로벌 오류 및 알림 처리 모범 사례

Vuex, 글로벌 오류 및 알림 처리 모범 사례

제가 하는 일은 이렇습니다만, 그것이 맞는지 잘 모르겠습니다.

//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
}

합법적인가요?

succes나 rejected api 요청에 따라 컴포넌트 내부에 더 많은 논리가 필요할 수 있습니다.지금처럼 모든 논리를 내 행동에 넣어야 할까?

각 액션의 상태 상태를 추가해야 할 수도 있습니다.예를 들어 다음과 같습니다.

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

그리고 매장에 매핑된 계산된 속성으로 컴포넌트에서 내가 원하는 것을 할 수 있습니까?

당신은 어떻게 생각하나요?

베스트 프랙티스인지는 모르겠지만 컴포넌트는 예외적으로 취급하고 있습니다.이 메서드에는 장점(오류 관리로 상태를 오염시킬 필요가 없음)과 단점(액션 호출마다 오류 관리 코드를 반복해야 함)이 있습니다.

1. 모든 서비스 콜은 액션으로 이루어집니다.
2. 상태는 돌연변이로만 설정됩니다.
3. 모든 서비스 콜은 해결(상태에서 로드하는 데이터) 및 거부(메시지 오류 표시)를 포함한 약속을 반환합니다.
4. 커스텀 에러가 발생했을 경우에 응답을 거부하는 인터셉터가 있습니다(여기서 응답에 에러 프로펠이 있는 경우는, 에러 프로펠을 에러로서 송신할 수 있기 때문에, 액션으로 응답을 디컨스트럭트 할 필요는 없습니다).

간단한 예를 들어보겠습니다(저는 악리를 사용하고 있습니다.사용하는 라이브러리에서 그 방법을 배울 수 있습니다).

Vuex의 작업은 비동기적입니다.따라서 그들을 잡으려고 하거나 잡을 필요가 없습니다.

API Service - 사용자 추가

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거부된 액시스가 약속을 반환하고 액션을 호출하는 컴포넌트에서 오류를 검출할 수 있는 경우 커밋이 이루어집니다.

요소

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: []
}

언급URL : https://stackoverflow.com/questions/55024063/vuex-best-practice-with-a-global-errors-and-notifications-handling