[LEVEL 2] Todo App

/vue-study.git

 

 

state와 mutations
- 여러개의 컴포넌트에서 아래와 같이 state값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵다.

method: {
increaseCounter() { this.$store.state.counter++; }
}

- state는 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한건지 확인하기 어렵다.
- mutations는 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행한다. 반응성, 디버깅, 테스팅의 혜택이 있다.

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');

 

# 비동기 코드

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

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

 

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

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

 

> 여러개의 컴포넌트에서 mutations로 시간 차를 두고 state를 변경하는 경우

> state 값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다.

 

 

 

※ 출처: Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex (https://inf.run/sxxQ)