Archives
11-24 23:50
Today
0
Total
287,672
관리 메뉴

FILife

Vue 에서 방문수령(?) 하기 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Vue 에서 방문수령(?) 하기

FIL 2018. 1. 23. 15:43
728x90

사실 Vue 보다는 axios에 관한 내용일수도 있겠다.


아래 2개의 Vue 객체가 있다.


const obj1 = new Vue({

data: {

list: [],

},

methods: 

getList() {

axios.get("/list/1")

.then( response => {

this.list = response.data;

});

}

}

});


const obj2 = new Vue({

data: {

},

methods: {

getList() {

}

}

});


두 객체는 각각의 js 파일로 분리되어 있으나, webpack 또는 script 태그를 통해 서로를 호출할 수 있다.


obj2에 중복된 메서드를 생성하지 않고, obj2에서 obj1의 메서드를 통해 동일한 데이터를 제공 받으려 한다.


처음엔 이렇게 해봤다.


axios.get("/list/1")

.then( response => {

return response.data;

});


결과는 undefined 였다.


리턴을 한번 더 줘봤다.


return axios.get("/list/1")

.then( response => {

return response.data;

});



브라우저 콘솔에는 표시 되지만, 실제 페이지에서는 객체를 인식하지 못했다.


babel-polypill을 통해 async 함수로 선언하고 await 키워드를 사용하는 수도 있다. (https://stackoverflow.com/a/45292646)


하지만 단 하나의 메서드만을 위해 그리 하긴 싫어서 이렇게 해결했다.


const obj1 = new Vue({

data: {

list: [],

},

methods: 

getList(requester) {

axios.get("/list/1")

.then( response => {

this.list = response.data;

if(requester !== undefined) {

requester.list = response.data;

}

});

}

}

});


const obj2 = new Vue({

data: {

},

methods: {

getList() {

obj1.getList(this);

}

}

});

즉 obj2가 obj1의 메서드에 직접 찾아가 필요한 데이터를 받아오는 것(방문수령).


퍼포먼스 이슈 등은 확인해보지 않아 모르겠지만 잘 작동한다.



0 Comments
댓글쓰기 폼