[note] Vue.js의 상태관리 라이브러리 Vuex의 핵심들 (1) state & getters

이전 프로젝트에서 Vue.js에서 컴포넌트 간의 데이터 변경을 다룰 때 event bus 등으로만 관리했을 때 컴포넌트끼리의 관계성을 파악하기 어려웠다. 사이즈가 큰 앱을 다룰 때는 그래서 Vuex를 많이 쓰는데, 처음 Vuex를 접했을 때 많이 헷갈렸어서, 한 번 정리를 쭉 해봤다.

 

Vuex는 핵심인 state, mutations, actions를 이해하는 게 중요한데, state는 vuex라는 공통 중앙 저장소가 가지는, 모든 컴포넌트가 공유하는 data다. 이 state라는 data는 모든 컴포넌트 간에 공유되는 속성이기 때문에 this.$store.state.sampleState 식으로 접근이 가능하다.

 

하지만, 컴포넌트끼리 모두 공유가 된다는 속성 때문에, 직접적으로 이렇게 접근해 상태를 바꾸는 것은 그다지 좋은 방법이 아니다.

그래서, 되도록 vuex에서 각 state의 변경을 다루고, 이를 수행하는 로직을 각 컴포넌트에서 불러쓰는 것이 깔끔하다.

 

// store -> index.js
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  getters: {
    counterTimes: state => {
      return state.counter * 2
    }
  }
})

 

store를 갖는, js 파일에, 우리는 state에 counter라는 변수를 테스트를 위해 설정해두고, getters라는 속성을 또 따로 둘 수 있어, 여기에 state 값을 변경하는 다양한 함수를 미리 선언해두고, 각각의 컴포넌트들이 필요할 때마다 state를 불러 로직을 따로 작성하는 대신, counterTimes를 부르는 식으로 대처할 수 있다. 코드의 중복을 막기 위한 Vuex의 장치다.

 

그럼 store에 등록해둔 getters 속성은, 실제 사용될 컴포넌트에서 아래와 같이 computed 속성 내부에 호출해줄 수 있다.

// App.vue 
// ..
<div>
	display: {{ counterTimes }}
</div>

<script>
	export default {
   	// ..
    	computed: {
        	counterTimes() {
            	return this.$state.getters.counterTimes
            }
        }
   	}
    
    
</script>

이때 Vuex의 ...mapGetters 헬퍼 함수를 통해 좀 더 가독성을 좋게 한 코드를 만들 수 있다.

 

 

// App.vue 
// ..
<div>
	display: {{ counterTimes }}
</div>

<script>
import { mapGetters } from 'vuex' // import 시켜준 후,

	export default {
   	// ..
    	computed: {
        	...mapGetters([
            	'counterTimes' // store의 getters에 등록된 속성의 이름
            ])
        }
   	}
    
    
</script>

...mapGetters는, computed 속성에 해당 컴포넌트 내에서 사용될 다른 속성과 함께 쓰기 위함이다. ES2015 문법.

 

만일, getters의 이름을 다르게 설정하고자 한다면, 아래처럼 쓸 수 있다.

 

// App.vue 
// ..
<div>
	display: {{ counterTimesDiff }}
</div>

<script>
import { mapGetters } from 'vuex' // import 시켜준 후,

	export default {
   	// ..
    	computed: {
        	...mapGetters([
            	counterTimesDiff: 'counterTimes' 
                	// 'counterTimes'는 store의 getters에 등록된 속성의 이름
            ])
        }
   	}
    
    
</script>