• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

vue와의 차이점

21.03.01 02:22 작성 조회수 128

1

vue와의 차이점을 좀 여쭤볼려고합니다.

vuex에서는 

state <- 전역 변수

mutations <- state 변경(state trace를 위한 것)

actions <- 비동기로직

로 관리를 하게 되는데 대충 예를 들어 비동기 로직이 들어가는 컴포넌트에서

this.isLoading = true

try {

 this.list = await this.$store.dispatch('post/add',  보낼 데이터);

} catch(err) {

 console.error(err)

} finally {

 this.isLoading = false

}

이렇게 해당 컴포넌트에서 처리를 해주고 있습니다.

redux 에서는

store <- 전역변수

reducers, actions <- vuex의 mutations

redux thunks, redux saga <- vuex의 actions

라고 대충 비교를 해볼 수 있을 것 같은데

여기서 제가 생각한 부분들이 맞는지 궁금합니다.

1. isLoginLoading을 전역에서 사용하는 이유

현재 redux에서는 logInLoading과 같은 것들을 전역에서 관리를 해주고 있는데 vue에서도 만약 여러 컴포넌트에서 공통으로 사용하는 state라면 actions를 활용해 데이터를 불러올 때 위의 코드처럼 지역에서 isLoading을 굳이 만들지 않고state.isLoginLoading처럼 만들어볼 수 있을것 같습니다.

2. logInError를 사용하는 이유.

onClick = () => {

   dispatch(userSlice.actions.logIn(로그인데이터))

}

logInError을 전역에 배치하는 이유는

위의 코드에서 try catch 하지 않고extraReducers[logIn.rejected].meta.error.message를 받아서 사용하기 위해서 인것 같습니다. vue에서는 그냥 try catch 사용

3. loginDone을 사용하는 이유

데이터를 잘 받아왔는지 확인하는 것 같은데 이 부분은 vue에서 비슷한 부분을 찾을 수 없어 더 헷갈리는 것 같습니다..

답변 1

답변을 작성해보세요.

0

redux에서 loginLoading, loginError, loginDone을 state에서 관리하는 이유는, vue와는 다르게 dispatch가 return 값이 없어서 컴포넌트 입장에서 현재 요청의 상태를 알 방법이 없기 때문입니다. loginError나 loginDone이 없다면 컴포넌트에서 에러, 성공 상태를 알 수가 없습니다.