인프런 커뮤니티 질문&답변

useAxios.js 내 axios 연결 .then에서

const resp = ref(null);
//생략
.then(result => {
	resp.value = result;
	data.value = result.data;
})

이렇게 전달을 주면 postList.vue에서

const totalCount = computed(() => resp.value.headers['x-total-count']);

이렇게 받아오면 cannot read properties of undefined 'x-total-count' 이렇게 콘솔창에 x-total-count를 읽을수가 없다고 나와 콘솔에 resp.value를 해보니 null 이 찍혔습니다. 하여 useAxios.js에서

.then(result => {
				resp.value = result;
				resp.value = resp.value.headers['x-total-count'];
				data.value = result.data;
			})

resp에 x-total-count를 넣고

postList.vue에서

const { data: posts, resp: totalCount } = useAxios('/posts', {
	method: 'get',
	params,
});

구조분해?할당으로 totalCount에 넣으니 동작이 되었는데 원인을 알 수 있을까요..