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

사실 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의 메서드에 직접 찾아가 필요한 데이터를 받아오는 것(방문수령).

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