[Vue/코딩애플/part3] 8. vuex - actions/dispatch (ajax, 오래 걸리는 작업 실행하기)

📌 actions - dispatch

• ajax 또는 오래 걸리는 작업을 하는 곳

actions : { 함수들 정의 }

 

 

mustations 안에다가 ajax 요청을 하면 되지 않을까? NO

 

name 바꾸는 mutations 함수 실행 후

age 바꾸는 mutations 함수를 순차적으로 실행하고 싶다.

근데 만약에 name 바꾸는 함수가 너무 오래 걸린다면 name 함수 실행이 끝나기전에 age 를 바꾸는 함수가 실행될 수 있다.

즉, 순차적 실행을 보장할 수 없다. (자바스크립트는 ajax처럼 비동기식 처리를 지원하는 코드는 잠깐 제껴두고 다음줄 부터 실행하려 한다

 

actions 안에 ajax or 오래걸리는 작업을 함수로 정의한다.

actions : {
    // ajax 또는 오래걸리는 작업들
    getData () {
      // axios import 해야 함
      axios.get('url').then((res)=>{
        console.log('res >', res);
      })
    }
  }

 

getData 를 실행시키려면

$store.dispatch('함수명')

 

 

⚡ actions 후에 state 변경은 무조건 mutations 가 해야 한다

 

 

ajax 로 데이터를 가져온 직후에 그걸로 state 도 변경하고 싶으면 다음과 같이 작성하면 된다.

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

 

context 는 작명을 자유롭게 할 수 있다.

---

 

위 개념을 응용하여

 

더보기 버튼을 누르면 데이터를 axios 를 통해 가져와서 store state 에 추가하는 기능을 만들어보자.

<button @click="$store.dispatch('getData')">더보기 버튼</button>

 

더보기 버튼을 누르면 getData actions 를 실행한다.

 

// store.js
(코드는 파일의 일부입니다)

state() {
    return {
      more : {} // 더보기
    }
}


// actions에 추가한 파라미터는 $store를 뜻한다고 생각
  actions : {
    // ajax 또는 오래걸리는 작업들
    getData (context) {
      // axios import 해야 함
      axios.get('요청 url').then((res)=>{
        console.log('res >', res.data);
        context.commit('setMore', res.data)
      })
    }
  }

 

state 에 더보기 데이터를 담을 state 를 정의한다. (more 로 정의)

 

getData 함수에는 axios 를 통한 get 요청을 한다.

요청을 통해 받아온 데이터를 more 데이터에 추가하기 위해 setMore 이라는 mutations 함수를 실행한다.

context.commit('함수명', 보낼데이터)

 

getData의 파라미터인 context 는 $store를 뜻한다고 생각하면 된다.

 

🔎 다른 컴포넌트에서 쓰는 데이터가 아니면 굳이 Vuex 에 저장할 이유는 없다.
여러 곳에서 쓰는 데이터를 저장하면 될 듯

 

- ajax 는 actions 에서
- state 변경은 mutations 에서