Vuex의 actions 파라미터 보내는 방법

actions 함수를 호출할 때 파라미터를 전달하는 방법을 사용해야 한다.

• 일반적으로 Vuex에서 actions를 호출할 때는 dispatch 메서드를 사용한다.
• dispatch메서드를 사용할 때 두번째 인수로 전달 할 수 있다.

형태

this.$store.dispatch("fetchData", parameter)

예제)

store.js

actions : {
	//액션(actions) 정의
  fetchData(context, parameter){
  	console.log(parameter)
  }
}

call.js(actions를 호출하는 js파일)

<template>
  <div>
  	<button @click="fetchDataWithParameter">액션호출</button>
  </div>
</template>

<script>
  export default(){
  	methods : {
    	fetchDataWithParameter(){
          const parameter = "전달할 파라미터";
          this.$store.dispatch('fetchData',parameter);
          //this.$store.dispatch를 사용하여 action를 호출하고 파라미터를 전달한다.
        }
    }
  }
</script>

위의 예제에서 fetchDataWithParameter 메서드를 호출하면 Vuex 스토어의 fetchData actions가 실행되며, 파라미터로 '전달할 파라미터'를 받을 수 있다. actions 함수 내에서 context 매개변수를 통해 스토어 상태와 다른 액션 또는 뮤테이션을 호출할 수 있다.

context

actions에 추가한 파라미터는 대충 $store를 뜻한다.

mutations에서 setMore쓸 때 데이터를 넣을 수 있다.

state 변경은 무조건 mutations가 한다.

mutations : {
	setMore(state, data){
    	state.more = data
    }
}