[Vue3] Vuex 에서 parameter 가 context? {commit}?

 

기본 파라메터

첫번째 파라메터는 호출할 때 따로 넘기지 않아도 됩니다.

fetchQuery(context, param){
    return new Promise((resolve, reject) => {
        axios
            .post('/user/query', param)
            .then(r=>resolve(r))
            .catch(error => reject(error))
    })
}

이렇게 첫번째 paramter 를 context (다른 이름도 가능 ctx 등..) 로 입력하면,

아래의 property 들이 보입니다.

state 를 사용하려면 context.state

getters 를 사용하려면 context.getters

 

context 가 아니라 { } 를 사용해서 필요한것만 가져올 수도 있습니다.

// fetchQuery(context, param)

fetchQuery({state, getters}, param)

이렇게 쓰면 state, getters 를 사용할 수 있습니다.

 

payload

두번째 파라메터

params 는 아래와 같다고 할 때,

let params = {
  user_name: 'hello',
  nick_name: 'bryan'
}

 

아래와 같이, store 의 action 을 호출할때 변수 자체를 넘기면

store.dispatch('quizStore/fetchQuizQuery', params)

 

store 에서는 그대로 받아서 사용하면 됩니다.

fetchQuizQuery(context, param){
    console.log(param)
/*
{
  user_name: 'hello',
  nick_name: 'bryan'
}
*/
}

또는 아래와 같이 사용할 수 있습니다.

fetchQuizQuery(context, {user_name, nick_name}){
    console.log(user_name) // 'hello'
    console.log(nick_name) // 'bryan'
}

 

action 에 여러 개 파라메터 넘길 때

위의 {user_name, nick_name} 을 참고해서 여러 개의 파라메터를 넘길 수 있습니다.

호출할 때

store.dispatch('quizStore/fetchQuizQuery', {param: params, param2: "something"})

 

store의 action 에서

fetchQuizQuery(context, {param, param2}){

}

param 에는 params가 들어가있고,

param2 에는 'something' 이 들어가 있겠죠.