Vuex Helpers, 핵심 정리

Vuex Helpers

기존에 About.vue에서 작성한 내용인데 보시면 똑같은 패턴으로 작성하고 있습니다.

이것을 vuex helpers를 통해 간략화할 수 있습니다.

vuex helpers 참조

 

위 내용을 전개연산자 ...과 mapState를 사용해서 정리할 수 있습니다.

마찬가지로 MovieList.vue, Movie.vue 파일에도 정리합니다.

mapState말고도 mapActions등을 사용할 수 있지만 실용성이 조금 떨어져서 많이 사용하지 않습니다.

 

Vuex 핵심 정리

stores에서 namespaced는 모듈로 사용할 것을 명시해주는 역할이며, 기타 속성은 위와 같습니다.

state 계산된 형태를 활용할 수 있도록 getters를 사용하며,

mutations는 state를 변경하는 로직만 작성되며,

나머지는 actions에 비동기 방식으로 작성됩니다.

getters는 state의 내용을 가져와서 활용합니다.

mutations는 state의 내용을 가져와서 활용할 수 도 있지만 state를 변경할 수 도 있습니다.

actions는 state, getters, mutations에서 가져와서 다 활용할 수 있습니다.

사용하는 방법이 바로 context.state, context.getters, context.commit, context.dispatch를 사용해서 활용할 수 있습니다.

 

Vue 컴포넌트에서 해당 Vuex를 가져오려고 하면 $store. 를 붙여서 사용합니다.

 

여러 개의 상태를 불러올 때는 전개 연산자 ...map를 사용해서 한꺼번에 불러 올 수 있습니다.

mapState와 mapGetters는 computed 안에 넣고, mapMutations와 mapActions는 methods에 넣어야 합니다.