<div id="readability-page-1" class="page"><div>vue3에서, App instance에는 <a href="https://v3.vuejs.org/api/application-config.html">Application Config</a>라는 객체타입의 데이터가 있다.
<blockquote>
말 그대로 Vue 앱의 환경과 관련된 정보가 담겨있는 객체다.
</blockquote>
그 중 <code>globalProeprties</code> 라는 프로퍼티는 데이터는 모든 컴포넌트에서 <code>this</code>로 쉽게 접근이 가능하다. 
(물론 Vue3의 Composition API에서는 this의 사용이 불가능하므로 <code>getCurrentInstance().appContext.config</code> 형태로 접근해야한다.
<pre><code>const app = createApp({})
app.config.globalProperties.foo = 'bar'

app.component('child-component', {
 mounted() {
 console.log(this.foo) // 'bar'
 }
})</code></pre>
<h2 id="주의사항">주의사항</h2>
나는 라우터를 이동할 때마다 <code>globalConfig</code>에
<ul>
<li>앱 여부</li>
<li>앱 버전</li>
<li>앱 이름</li>
<li>로그인 여부</li>
</ul>
등의 상태값을 저장할 생각이었다.
<pre><code>/**
 * 라우터를 이동할떄 전체영역에서 공통으로 사용하는 appData, assistData를 가져온다.
 * - appData: 처음 한번만 가져옴
 * - assistData: 페이지를 이동할 때마다 갱신
 */
 router.beforeEach(async (to, from, next) =&gt; {
 // TODO: appData, assistData 타입정의 필요
 const appData = await testApi.getAppData();
 const assistData = await testApi.getAssistData();

 app.config.globalProperties = deepFreeze({
 ...app.config.globalProperties,
 appData,
 assistData,
 });

 next();
 });</code></pre>
그리고 다른컴포넌트에서 수정이 불가능하도록 deepFreeze라는 유틸함수를 정의하여 <code>Object.freeze</code>를 적용해놓았다.
그러나 저렇게 적용하고나자 아래와같은 이슈가 발생했다. 
<img src="https://media.vlpt.us/images/ginameee/post/eedcb00c-aa81-4bfc-9afb-309c70714765/image.png">
확인해보니 globalConfig는 개발자만 조작하는 영역이 아니었다. 
<code>$router</code>, <code>$route</code>, <code>$store</code> 와 같은 정보들도 세팅이 되어있었다. 
deepFreeze를 한 뒤에, Vue가 해당 데이들을 세팅하지 못하기때문에 발생하는 이슈였다.
<img src="https://media.vlpt.us/images/ginameee/post/b0bbfd0e-3d7a-4f6e-8bcf-67e51b6edc45/7F9570FF-8A5B-4FA6-B46B-F2C279E9C092.png">
결국 deepFreeze를 globalProperties가 아닌 각 데이터에 적용시켜놓았다.
<pre><code>/**
 * 라우터를 이동할떄 전체영역에서 공통으로 사용하는 appData, assistData를 가져온다.
 * - appData: 처음 한번만 가져옴
 * - assistData: 페이지를 이동할 때마다 갱신
 */
 router.beforeEach(async (to, from, next) =&gt; {
 // TODO: appData, assistData 타입정의 필요
 const appData = await testApi.getAppData();
 const assistData = await testApi.getAssistData();

 app.config.globalProperties = {
 ...app.config.globalProperties,
 appData: deepFreeze(appData),
 assistData: deepFreeze(assistData),
 };

 next();
 });</code></pre></div></div>

ginameee.log

Jangchun Lee

vue3에서, App instance에는 Application Config라는 객체타입의 데이터가 있다.
말 그대로 Vue 앱의 환경과 관련된 정보가 담겨있는 객체다.
그 중 globalProeprties 라는 프로퍼티는 데이터는 모든 컴포넌트에서 this로 쉽게 접근이 가능하다.
(물론 Vue3의 Composition API에서는 this의 사용이 불가능하므로 getCurrentInstance().appContext.config 형태로 접근해야한다.
const app = createApp({})
app.config.globalProperties.foo = 'bar'
app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})
주의사항
나는 라우터를 이동할 때마다 globalConfig에
앱 여부
앱 버전
앱 이름
로그인 여부
등의 상태값을 저장할 생각이었다.
/**
   * 라우터를 이동할떄 전체영역에서 공통으로 사용하는 appData, assistData를 가져온다.
   * - appData: 처음 한번만 가져옴
   * - assistData: 페이지를 이동할 때마다 갱신
   */
  router.beforeEach(async (to, from, next) => {
    // TODO: appData, assistData 타입정의 필요
    const appData = await testApi.getAppData();
    const assistData = await testApi.getAssistData();
    app.config.globalProperties = deepFreeze({
      ...app.config.globalProperties,
      appData,
      assistData,
    });
    next();
  });
그리고 다른컴포넌트에서 수정이 불가능하도록 deepFreeze라는 유틸함수를 정의하여  Object.freeze를 적용해놓았다.
그러나 저렇게 적용하고나자 아래와같은 이슈가 발생했다.
확인해보니 globalConfig는 개발자만 조작하는 영역이 아니었다.
$router, $route, $store 와 같은 정보들도 세팅이 되어있었다.
deepFreeze를 한 뒤에, Vue가 해당 데이들을 세팅하지 못하기때문에 발생하는 이슈였다.
결국 deepFreeze를 globalProperties가 아닌 각 데이터에 적용시켜놓았다.
/**
   * 라우터를 이동할떄 전체영역에서 공통으로 사용하는 appData, assistData를 가져온다.
   * - appData: 처음 한번만 가져옴
   * - assistData: 페이지를 이동할 때마다 갱신
   */
  router.beforeEach(async (to, from, next) => {
    // TODO: appData, assistData 타입정의 필요
    const appData = await testApi.getAppData();
    const assistData = await testApi.getAssistData();
    app.config.globalProperties = {
      ...app.config.globalProperties,
      appData: deepFreeze(appData),
      assistData: deepFreeze(assistData),
    };
    next();
  });

globalProperties

댓글