[ISSUES] Vuex State가 Component에 반영되지 않는 현상

현상

Vuex의 store에서 state가 update 되었지만, 새로운 state에 대해서 UI는 업데이트되지 않는 현상이 발생했다.

해결 과정

두 가지 부분에서 잘못된 부분을 발견했다.

우선, 평가지 파일을 업로드하는 부분에서 업로드한 파일을 곧바로 사용하지 않고, 배열에 push 해서 사용하고 있었다.

파일 객체를 사용하는 부분에서는 모두 배열의 0번째를 가리키고 있어, 파일이 추가되어도 절대 바뀌지 않았다.

무슨 생각으로 코드를 짠 건지...

 

첫 번째 문제를 해결했지만 위 파일명이 새로운 파일의 이름으로 바뀔 뿐 아래 테이블에 새로운 데이터 반영되지 않았다.

테이블 컴포넌트의 created()를 통해 확인해보니,

처음 파일을 업로드했을 때는 아래 컴포넌트가 파일 데이터로 랜더링 되지만

다음 새로운 파일로 재 업로드했을 땐 컴포넌트가 새롭게 랜더링 되지 않는 현상이 있었다.

아래 테이블은 파일 업로드 여부를 v-if로 판단하여 화면에 생성되도록 되어있다.

재 업로드 시 아래 테이블의 v-if 값을 false로 한 뒤 새로운 파일 셋이 업로드하면 다시 true가 되도록 해주어 새로운 값으로 랜더링 되도록 시도했지만...

의도대로 되지 않았다.

 

해결방법

파일 업로드 로직이 Vuex actions로 동작하기 때문에 Vuex 공식문서를 살펴보았다.

다음과 같은 내용을 확인할 수 있었다..

 

Mutation에서는 state를 변경하고, Actions에서는 state를 변경하는 행위(Mutation)를 commit 하거나, 비순차적 / 비동기 작업이 포함될 수 있다.

 

Vuex는 효율적으로 state를 관리하기 위해서 Mutation과 Actions 두 가지로 역할을 나누어 두었다.

Vuex는 기본적으로 State의 변경사항을 추적할 수 있어야 한다.

State의 변경사항을 관리하는 Mutation에서 만약 비동기 로직을 사용하게 되면, state의 변경사항에 대해서 확실하게 추적할 수 없는 상황이 발생할 수도 있다.

 

따라서 결과를 받는 상황이 분명하지 않는 로직의 경우 Actions에서 관리하도록 하는 것이다.

 

현재 Actions에서  평가지 원본 데이터를 관리하고 있기 때문에 비순차적으로 데이터가 처리되어서 테이블 컴포넌트가 false -> true로 바뀌는 동안 state의 변경이 완료되지 않아서 새로운 파일 데이터가 테이블에 반영되지 않는다는 나름의 결론을 얻을 수 있었다.

 

그래서 아래와 같이 then 함수를 통해서 Actions의 로직이 끝난 후에 테이블 컴포넌트의 state가 true가 될 수 있도록 수정하였다.

 

결과적으로 내가 원하는 대로 새로운 파일이 업데이트될 때마다 테이블도 업데이트가 잘 되는 것을 확인할 수 있었다.

 

이번 이슈를 통해 내가 Vuex를 제작자의 의도대로 제대로 사용하고 있는 건지에 대한 의문이 생겼다...

공식문서와 더 다양한 예제를 보면서 지금까지 작성한 Vuex 로직을 피드백해봐야겠다...

 

## Reference

Actions | Vuex

Vuex - Actions