Vuex.store에 들어있는 vue의 상태 state 와 이를 다루는 Mutations(동기)와 Actions(비동기)를 컴포넌트에서 사용할 때 간단하게 구현해주는 좋은 헬퍼 메소드가 있습니다
웬만하면 actions에서 mutations를 commit해서 사용하는게 일반적이라고 하는데 예시로 바로 사용해봅니다
Store에 있는 애들을 바로 컴포넌트로 가지고 올 수 있습니다.
가지고 왔으니 바로 사용도 가능합니다
이렇게 바로 가지고 와서 컴포넌트의 템플릿에 쏴주는게 가능합니다!!
이게 엄청 편한건데 이걸 처음부터 무작정 쓰면 편한지 모르거든요...
mapState안에 오브젝트를 써서 사용할 변수(사실 함수)의 이름을 바꿔줄 수도 있고,
mapMutations의 함수들을 그대로 가지고 와 콜백함수로 재사용도 가능합니다
그럼 이게 도대체 왜 편한거냐!
원래는 이렇게 짜야 하거든요
count가 사실 함수라고 했던 이유는 이런식으로 로직이 작동하기 때문입니다. State값을 반횐하는 함수인거죠
Mutations도 commit으로 불러와야하는데 저 작업을 mapMutations가 미리 다 해서 우리는 함수를 바로 갖다 쓰는 것 처럼 활용할 수 있는겁니다
Vuex의 맵핑 헬퍼 메소드 아주 꿀이에요