[Vue.js] Vuex3: actions 항목 사용하기

💡 실습 포인트!

💜 들어가기 전에

• Vue 에서는 state 를 수정할 때 mutations 에 함수를 만든 후, 이를 이용해서 수정하는 것이라고 공부했다.
• 하지만, 서버에서 데이터를 가져와 수정하고 싶을 때에는 actions 라는 항목을 만든 후, 여기에서 서버로 ajax 요청을 해주어야 한다.
• 왜냐하면 mutations 항목에 함수를 만들 때, 내부에 ajax 와 같이 상대적으로 시간이 오래 걸리는 코드를 적어놓으면, JavaScript 가 이렇게 시간이 오래 걸리는 코드는 제쳐두고 다음 줄부터 실행하려는 경향이 있어서 의도하지 않은 버그가 발생할 수 있기 때문이다.
• 따라서, state 를 수정하는 용도로만 mutations 항목을 사용하고, ajax 와 같이 시간이 오래 걸리는 코드는 actions 항목을 사용하는 것이 좋다.

---

💜 actions 만들어 사용하기

const store = createStore({
  state(){
    return {
    // state 작성
    }
  },
  mutations: {
  // state 변경 함수 작성
  },
  actions: {
  // 시간이 오래 걸리는 함수 작성
    getData(){
      axios.get('').then(()=>{
      	// GET 요청 성공할 경우 실행할 코드
      }).catch(()=>{
      	// GET 요청 실패할 경우 실행할 코드
      })
    }
  },
})

• mutations 항목을 만들 때처럼 actions 항목을 만들고, 그 안에 함수형태로 작성해주면 된다.
• 이제 다른 vue 파일에서 $store.dispatch('getData') 와 같이 actions 항목 내의 특정 함수를 불러오면 vue 파일로 데이터를 가져다 준다.

 

const store = createStore({
  state(){
    return {
    // state 작성
    }
  },
  mutations: {
  // state 변경 함수 작성
  },
  actions: {
  // 시간이 오래 걸리는 함수 작성
    getData(context){
      axios.get('').then(()=>{
      	// GET 요청 성공할 경우 실행할 코드
        context.commit('mutations_항목_내의_함수명', 전송할_데이터) 
      }).catch(()=>{
      	// GET 요청 실패할 경우 실행할 코드
      })
    }
  },
})

• 만약에 actions 내의 함수에서 state 변경도 같이 하고 싶다면 위와 같은 형태로 코드를 작성해야 한다.
• 왜냐하면 state 를 변경할 때에는 무조건 mutations 내의 함수를 사용해야 하기 때문이다.
• 또한 mutations 내의 함수를 사용할 때에는 commit() 을 사용하며, 이를 사용하기 위해 함수에 파라미터를 하나 추가해서 파라미터명.commit() 과 같이 사용한다.
  (보통 이때에 관습적으로 context 라는 파라미터를 사용한다.)
• commit() 안에는 mutations 항목 내의 함수명을 적어주고, 만약 전송하고 싶은 데이터가 있으면 commit() 안에 두번째 파라미터로 전송할 데이터를 넣어주면 된다.