Vuex watches only inital property

다음과 같은 Vuex store가 있다고 하자.

이 user를 Vue Component의 computed에 ...mapState를 이용해서 주입해서 사용하고 있는 상황. 이 때 mutation을 통해서 user의 id나 email을 바꾸면 그것이 실시간으로 Vue Component에 반영되는 것을 확인할 수 있으나, user에 새로운 key를 추가하면 Vuex는 그 key가 생겨났다는 사실을 인지하지 못한다.

예를 들어서

user: { id: 'adoji', email: '[email protected]' }가 어떤 Mutation에 의해

user: { id: 'adoji', email: '[email protected]', country: 'ko' } 로 바뀐 상황에서

user를 주입받는 Vue Component Template에서 {{ user.country }} 로 출력하더라도

해당하는 위치에 “ko” 라는 문자열이 출력되지 않는다는 뜻이다.

해결 방법은 간단하다. 미리 user: { id: null, email: null, country: null } 과 같이 country를 initial state에 추가하면 된다.

변수들을 굳이 미리 Nil로 초기화 하는 것이 마치 ESLint의 no-undef-init을 어기는 느낌이라 의식적으로 피하다가 겪게된 문제인데, 기본적으로 Vuex가 객체를 Deep하게 watch하고 있지만 최초에 존재하지 않았던 키값의 출몰은 감지하지 못하니 처음부터 사용할 키들을 다 추가해놓아야 한다는 것이다.

이로 인해 얻을 수 있는 외외의 이점은 바로 문서화다. 이곳 저곳에서 state의 키가 하나 둘 늘어나는 것 보다는 처음부터 이 객체가 가질 수 있는 모든 키들을 볼 수 있다는 장점이다.

Leave a Reply