[Vue] vuex actions 에서 mutation, state 사용하기

 

 

actions 에서 mutations 호출하기

 

예제 소스 코드

const state = {
  something: ''
}

const mutations = {
  setSomething (state, message) {
    state.something = message
  }
}

const actions = {
  method_A({ commit }) {
    commit('setSomething', 'from method A')
  }
}

 

actions 의 method_A 라는 메소드에 첫번 째 파라메터를 보면 { } 사이에 commit 을 받고 있습니다.

이걸 이용해서 mutations 을 호출합니다.

commit('setSomething', 'from method A')  --> setSomething(state, message)

setSomething 에서 state 를 첫번째 인자값으로 받아서 state의 값을 변경합니다.

state.something = message

state 의 값은 mutations 에서만 변경하도록 하여  Vue 의 Reactive 성질 준수합시다.

 

 

.vue 에서 사용

methods: {
  doSomething(msg) {
    // this.$store.state.something = msg; // 비추비추
    this.$store.commit('setSomething');
  }
},

mapMutations 를 사용할 경우

import { mapMutations } from 'vuex'
methods: {
  ...mapMutations(['setSomething'])
},


// this.setSomething('some message') 로 사용

 

참고

Mutations : state 값을 변경하는 로직들.

1. 인자를 받아 Vuex 에 넘겨줄 수 있고
2. computed 가 아닌 methods 에 등록