반응형
기본 파라메터
첫번째 파라메터는 호출할 때 따로 넘기지 않아도 됩니다.
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' 이 들어가 있겠죠.
728x90
반응형
'Vue.js' 카테고리의 다른 글
[vue] Composition api 에서 property로 받은 변수 watch 하는 방법 (19) | 2023.09.10 |
---|---|
[Vue] computed 사용할 때 파라메터 넘기기 (0) | 2023.09.10 |
[Vue3] Router 에서 권한 체크해서 login 페이지로 보내기 (0) | 2023.09.05 |
[Vue] vuex 설치 (0) | 2023.08.20 |
[Vue3] Stand Alone #6. Component 만들기 (4) | 2022.03.21 |
댓글