[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 중급 강좌를 보고 정리한 글입니다.
Author And Source
이 문제에 관하여([TIL]0817), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sza0203/TIL0817저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)