[Vuex] actions

actions

📌 비동기 로직 처리에 사용한다.
📌 actions안에 비동기방식으로 서버와 통신을 할 수 있다. 비동기 처리 이후 state를 변화시키는 (mutations) commit을 실행시킨다.
📌 state를 변화시키는것은 mutations에 넣고 mutations을 동작시키는 비지니스로직은 actions에 넣는다.
📌 actions를 각 components에서 dispatch를 사용해서 actions를 실행하고 actions내에서 mutations를 commit한다.

📌 actions 기본 사용방법

// store/index.js
mutations: {
 // state 값을 받아와야하기때문에 state 인자로 추가
 // 넘겨받은 값을 받을 수 있는 인자값 payload 추가
  addUsers: (state, payload) => {
    state.allUsers.push(payload)
  }
},
actions: {
  // { commit } 객체는 context라는 객체를 좀 더 간단하게 써준것이다.
  // payload값 넘겨줘야함
  addUsers: ({ commit }, payload) => {
    // addUsers를 실행시킨다!
    commit('addUsers')
  }
}

// components/xxx.vue
<script>  
  export default {
    methods: {
      signUp() {
      // dispatch로 actions 실행
      // actions의 'addUsers' 불러옴
      // payload로 'abc' 넘겨줌
      this.$store.dispatch('addUsers', 'abc')
      }
    }
  }
</script>

mapActions

// components/xxx.vue
<script>  
  export default {
    methods: {
      ...mapActions(['addUsers']),
      signUp() {
      // this.$store.dispatch('addUsers', 'abc')
      // actions의 addUsers를 여기서 바로 쓰고 'abc'를 payload로 추가
      this.addUsers('abc')
      }
    }
  }  
</script>