Vue + axios get parameter 예제 코드

---

Vue를 사용하여 개발할 경우 Request URL GET  Query parameter를 전달해야 할 경우가 있다.

 

검색 조건이 2개 이상인 경우 

 

예를 들어

http://localhost:8000/price?large=09&mid=01

위와 같은 URL를 만들어 서버를 호출해야 할 경우

 

아래 예제는 vuex와 axios를 사용하였다.

 

axios 사용 관련 예제코드는 아래 글을 참고하면 좋을 것 같다. 

[dev] - 12. Vue3 + Nodejs 연동

12. Vue3 + Nodejs 연동

 

주요 예제 코드는 다음과 같다. 

// xx.vue 파일에서 GetPrice 호출

store.dispatch("GetPrice", {
        large : '09',
        mid: '01'}
        );
 
 
 // store.js 내용
 
 GetPrice({commit}, {large, mid}){
    return axiosClient
        .get("/price", {params: {large:`${large}`, mid:`${mid}`}})  // Get Query parameter
        .then((res) =>{
            commit("setResData", res.data);
            return res;
        })
        .catch((err)=>{
            return err;
        });
},

 

 

 

get("/price", {params: {large:`${large}`, mid:`${mid}`}})

 

이 부분을 잘 변형해서 사용하면 Vue에서 Get Query Parameter를 만드는 것이 어렵지 않을 것이다.

 

---