Vuex -action

ajax 는 비동기식 통신방식을 지원하는 코드여서 시간이 많이걸림 

자바스크립트는 시간이 오래걸리는것을 후순위로 처리하는데 

그래서  mutations에 state 변경과 함께 사용하게 되면 순서대로 이루어지지 않을수 있음

 

mutations에서는 state 변경만 처리하도록 하고 

ajax 처리는 action에서 하도록 하여서 실행시 발생할수 있는 오류를 미연에 방지하는것.

 

 actions 만드는법

그낭 mutations처럼 actions 항목을 만드신 후에 함수형태로 만드시면 됩니다.

actions : {
  데이터가져오기(){
    axios.get('').then(()=>{ 
      성공시 실행할 코드 
    })
  }
}

그럼 이제 App.vue 이런 곳에서 $store.dispatch('데이터가져오기') 라고 사용했을 때 진짜 데이터가져와줍니다.

그리고 당연히 actions 함수를 부탁할 땐 $store.dispatch라고 정중히 부탁하셔야합니다. 

 

 actions 에서 받은 값을 가지고 state 상태를 변경하고 싶을때는 이렇게

context라고 자유작명 해주고 써줍니다. $store 와 같은 역할을 합니다.

actions : {
  데이터가져오기(context){
    axios.get('').then(()=>{ 
      context.commit('mutations함수명') 
    })
  }
}