Vuex - Actions

Vuex - Actions

---

이전 글에서 설명했듯이 Mutations에는 순차적인 로직들만을 선언하고, Actions에는 비 순차적 또는 비동기 처리 로직들을 선언한다고 했다.

왜 처리 로직의 성격에 따라 Mutations와 Actions로 나눠 등록해야 할까?

Mutations의 역할은 State 관리이다.

상태관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데, 

Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문이다.

따라서, setTimeout()이나 서버와의 HTTP 프로토콜 통신 처리 같이 결과를 받는 타이밍이 예측되지 않는 로직들은 Actions에 선언하는 것이다.

Actions 등록

---

Vuex에 Actions를 등록하는 방법은 다른 속성과 비슷하다.

store.js에 actions 속성을 정의하면 된다.

context의 commit() 대상은 mutations에 정의한 메소드를 의미한다.

상태가 변화하는 것을 추적하기 위해 actions는 결국 mutations의 메소드를 호출(commit)하는 구조가 된다.

HTTP 프로토콜을 통한 비동기 통신이나 setTimeout같은 로직들은 actions에 선언해준다.

Actions 사용

---

actions를 호출할 때에는 $store의 dispatch를 호출하면 된다.

mutations의 commit을 사용하듯이 dispatch의 사용법도 동일하다.

Actions를 통한 작업처리의 전체적인 구조도를 보면 다음과 같다.

1. 컴포넌트에서 dispatch로 Vuex에 정의한 actions 속성의 메소드를 호출한다. 
2. 호출된 actions 속성의 메소드는 commit()을 이용하여 mutations 속성을 호출한다.
3. mutations 속성을 통하여 state에 정의된 데이터의 값에 변경이 발생한다

Actions에 인자 넘기기

---

Actions에 인자를 넘기는 방법은 Mutations과 동일하다.

App.vue 컴포넌트에서 dispatch로 Mutations를 호출할 때 두번째 인자를 전달한다.

두번째 인자를 전달받을 변수명을 Vuex에서 정의한다. (payload)

commit()으로 mutations을 호출 할 때 인자를 전달하거나 혹은 actions 메소드 내부에서 작업을 하는데 사용하면 된다.

mapActions

---

mapGetters, mapMutations 헬퍼 함수들과 마찬가지로 mapActions도 동일한 방식으로 사용할 수 있다.

참고 - 

https://joshua1988.github.io/web-development/vuejs/vuex-actions-modules/