[TIL]0817

actions란?

• 비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations
• 데이터 요청, Promise,ES6 async과 같은 비동기 처리는 모두 actions에 선언한다

// store.js
state: {
  num: 10
},
mutations: {
  doubleNumber(state) {
    state.num *2;
  }
},
actions: {
  delayDoubleNumber(context) { // context로 store의 메서드와 속성에 접근한다
    context.commit('doubleNumber');
  }
}

// App.vue
this.$store.dispatch('delayDoubleNumber');

actions에서 mutations을 접근하기 위한 경로로 context가 제공된다.
mutations에 신호를 보내는 역할

actions 비동기 코드 예제

// store.js
mutations: {
  addCounter(state) {
    state.counter++
  },
},
actions: {
  delayedAddCounter(context) {
    setTimeout(() => context.commit('addCounter', 2000);
  }
}

// App.vue
methods: {
  incrementCounter() {
    this.$store.dispatch('delayedAddCounter');
  }
}

흐름은 간단하다.
incrementCounter() 를 실행시키면 'delayedAddCounter' actions을 실행시키고,
store에서 'delayedAddCounter'를 실행시키고 2초뒤에 'addCounter'를 실행시킨다.

비동기 처리 로직을 actions에 선언해야 하는 이유

• 언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인하기 어렵다

ex) 여러 개의 컴포넌트에서 mutations로 시간 차를 두고 state를 변경하는 경우에는
state값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다.

해당 TIL은 인프런 Vue.js 중급 강좌를 보고 정리한 글입니다.