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

안녕하세요. Provide/Inject 강의의 마지막 부분 app레벨 provide에 대해 질문드립니다.

우선 코드는 아래와 같습니다.

1. main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');
app.provide('msg', 'msg입니다');

2. App.vue

<template>
	<div></div>
</template>

<script>
import { inject } from 'vue';
export default {
	setup() {
		const msg = inject('msg');
		console.log('app.vue', msg);
		return {};
	},
};
</script>

강의 16분 10초에서 위 코드와 유사한 것을 시연해주셨습니다.

강의에서는 코드 작성 후 저장해 자동 새로고침 되었고, 정상적으로 inject한 값이 콘솔에 출력됐습니다.

저도 개발서버 기능이 제공하는 저장-자동새로고침 시에는 provide-inject한 값이 콘솔에 정상 출력됩니다.

그러나 브라우저의 새로고침 버튼을 눌러 페이지를 새로 불러오면 inject된 값이 undefined로 찍힙니다. (출력내용은 "app.vue undefined"입니다.)

분명 컴포넌트 인스턴스가 생성되기 전에도 provide한 값을 inject로 접근할 수 있다고 설명해주셨는데 그렇지 못해서 왜 그런지 궁금했습니다.

제 개발환경을 확인해봐야 할지, 아니면 제가 겪고있는 상황이 정상적인지 궁금합니다.