최근에 vue3으로 채팅 기능이 있는 웹을 만들고 있다.

main.js에서 선언된 socket 인스턴스를 다른 컴포넌트에서도 쓸 수 있게 전역 변수로 두려고 했는데, 잘 안 되는 것이다.
vue2에서 vue3으로 넘어가면서 워낙 업데이트가 잦다 보니 한참 구글링 하고 나서야 찾았다.

vue3에서 전역 변수 선언하기

이 글에서의 vue 버전은 3.0.0이다.

// main.js

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

import io from 'socket.io-client'
const socket = io("http://localhost:3000", { transports: ['websocket']});

const app = createApp(App);
app.config.globalProperties.$socket = socket;


app.mount('#app')

이 코드에서 나는 socket 인스턴스를 전역 변수에 등록하려고 한다.

app은 루트 컴포넌트 인스턴스다.
app.config.globalProperties.$socket = socket; 이 부분에서 socket 인스턴스를 $socket 변수에 할당했다.

위와 같이 선언한 코드를 vue 컴포넌트에서 읽어오자.

// App.vue

<script>
import { getCurrentInstance, onMounted, reactive } from "@vue/runtime-core";

export default {
  name: "App",
  setup() {
    const app = getCurrentInstance();
    const $socket = app.appContext.config.globalProperties.$socket;

    const state = reactive({
      message: "",
      textarea: "",
    });

    function chatSubmit() {
      $socket.emit("chat", {
        message: state.message,
      });
      state.message = "";
    }

    onMounted(() => {
      $socket.on("chat", (data) => {
        state.textarea += data.message + "\n";
      });
    });

    return {
      state,
      chatSubmit,
    };
  },
};
</script>

main.js에서 $socket에 저장했던 socket변수는 getCurrentInstance().appContext.config.globalProperties. $socket에 저장되어있다.

console.log로 확인해보면 socket 인스턴스를 잘 받아온 것을 확인할 수 있다.

그리고 getCurrentInstance() 메소드는 setup() 혹은 LifeCycle Hook에서만 동작한다.

3줄 요약

1. createApp(루트 컴포넌트).config.globalProperties.변수명 = 할당할 값 으로 선언해라.
2. getCurrentInstance().appContext.config.globalProperties.변수명으로 받아와라.
3. getCurrentInstance() 메소드는 setup() 혹은 LifeCycle Hook에서만 쓸 수 있다.