[Vue3]plugins 설정 ( app.config.globalProperties )

app.config.globalProperties는 전역 애플리케이션 인스턴스에 속성 추가 할 수 있는 기능이다.

 📌 사용법

---

✅ 1. 전역속성 생성

pulgins폴더안에 person.js라는 파일를 만들어주고
아래 예시 코드를 작성한다.

export default {
  install(app, options) {
    const person = {
      name: "이자경",
      say() {
        alert("this.name");
      },
    };
    app.config.globalProperties.$person = person;
  },
};

그리고 main.js에 가서 app전역으로 해당 속성을 사용하겠다고 선언하면 된다.

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router";
**import person from "./plugins/person";**

const app = createApp(App);
**app.use(person);**
app.use(router);
app.mount("#app");

✅ 2. 만든 전역속성 사용법

• template에서 사용하기

<template>
  <div>
    <hr class="my-4" />
    <!-- 컴포넌트 인스턴스 속성을 템플릿안에서 사용할때 예시 -->
    <h2>{{ $person.name }}</h2>
  </div>
</template>

• script에서 사용하기

만들어진 전역속성은 컴포넌트 인스턴스에서 사용이 가능하다!
그런데 Vue3의 경우 컴포넌트 인스턴스가 setup()라이프사이클 이후에 생성이 된다.
그래서 setup()에서는 사용이 불가하고, OptionsAPI에서 사용할 수 있다.

<script>
export default {
  created() {
    console.log(this.$person.name);
    this.$person.say()
  },
};
</script>

• 난 setup()에서 사용하고 싶다! 라면
  app.config.globalProperties가 아닌
  provide, inject를 사용하면 된다.

export default {
  install(app, options) {
    const person = {
      name: "이자경",
      say() {
        alert("this.name");
      },
    };
    app.provide('person', person)
  },
};

<script setup>
import { inject, ref } from "vue";

const person = inject("person");
console.log("person.name: ", person.name);
</script>

---

📌 pulgins에 옵션을 설정하고 싶다면?

• pulgins폴더안에 person.js

export default {
  install(app, options) {
    const person = {
      name: '이자경',
      say() {
        alert('this.name')
      },
      **...options,**
    }
    app.config.globalProperties.$person = person
    app.provide('person', person)
  },
}

• main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router";
**import person from "./plugins/person";**

const app = createApp(App);
**app.use(person, {name:'바꼈나욤?');**
app.use(router);
app.mount("#app");

---

매번 헷갈려서 강의 다시보고 다시보고 또 보고 했던 부분이다.
강의보면 알거 같다가도
막상 적용해보려고 하면 모였더라? 했던 부분 🤬🤬🤬🤬

여기에 내용 정리하면서
내 머릿속에도 내용이 정리되었길 바래본다!
➕Levelup(1)

++
app.config.globalProperties은 template에서 사용하기 좋고,

app.provide()는 setup()에서 사용하기 좋다.
이왕이면 플러그인 설정할 때 둘다 써주는게 좋은듯!