Actions (vuex)

mutation(state를 관리, 변화 시키는 역할)은 모든 기능이 동기로 동작한다. 

하나의 데이터에 여러개의 컴포넌트가 접근하려고 할 때 효율적으로 관리하기 위함인데

비동기 로직들이 포함되면 그 순서를 정확하게 알기 어렵다. 그래서 비동기 로직은 Actions를 이용한다. 

ex) actions의 예제

회원가입시 서버와 통신을 할때 회원가입의 중복검사, 등등의 함수를 실행한 후 state에 추가해달라는 값을 마지막에 commit한다. 

 

mutations을 통해 state를 변화시키고,  해당 mutation을 동작시키는 비지니스 로직으로 Actions를 사용한다. 

 

mutations을 commit해서(발생시킴) state의 값을 변경했다면

컴포넌트에서 Actions를 실행시키는 것은 Dispatch를 이용한다.

 

dispatch로 actions을 실행-> actions내에서 mutation을 commit -> mutations이 state를 변경

*dispatch: 보내다 (신호를)

 

---

 

({ commit })

mutations: {
 addUsers: (state, payload) => {
  state.allUsers.push(payload)
 }
},
actions: {
 addUsers: ({ commit }, payload) => { //function({commit})
 commit('addUsers', payload)
}

- ({ commit })은 context을 간단하게 써준 객체형태로 불러와준 것.

- payload를 인자로 붙여도 되지만, context라는 하나의 값이기에 바깥에 payload를 받는다.

 

 

 

 

dispatch (actions을 불러옴)

 methods: {
      ...mapMutations(['addUsers']),
      signUp() {
        let userObj = {
          userId: this.userId,
          password: this.password,
          name: this.name,
          address: this.address,
          src: this.src
        }
        // this.addUsers(userObj)
        this.$store.dispatch('addUsers', userObj)
        this.clearForm()
      },

 

그럼 store파일에서 Actions의 addUsers가 실행이 된다.

payload를 받아서  mutation ({commit})의 addUsers가 commit(실행) 될 것 

 

 

dispatch도 줄여서 함수처럼 사용할 수 있다. 

 methods: {
      ...mapActions(['addUsers']),
      signUp() {
        let userObj = {
          userId: this.userId,
          password: this.password,
          name: this.name,
          address: this.address,
          src: this.src
        }
        //this.$store.dispatch('addUsers', userObj)
        this.addUsers(userObj)
        this.clearForm()
      },