[Vue.js 3] store에서 ws 모듈 사용하기

 

소켓을 App.vue에서 사용하다보니 하위 컴포넌트에서 ws.send 해야 할 때마다 emit 쓰기 귀찮았다.

그러다 'store에서 ws 모듈을 사용하면 컴포넌트 상관없이 쓸 수 있지 않을까?' 라는 생각을 하게 되었다.

 

ws 사용 방법

 

이것을 store에 만드는 것은 아주아주 쉬웠다.

composition api 사용할 때와 같다!

 

<src/store/index.js>

import { defineStore } from 'pinia';
import { ref } from '@vue/reactivity';

export const IndexSotre = defineStore('IndexSotre', () => {
    const isLogin = ref(false); // login true or false vlaue
    const wsData = ref('');
    
    const ws = new WebSocket('ws://주소값 입력');
    ws.binaryType = 'arraybuffer';
    ws.onopen = () => {
        console.log('[App] Connection Success');
    };
    ws.onmessage = (data) => {
        wsData.value = data;
        console.log('[App] Saved in buffer');
    };
    ws.onerror = (error) => {
        console.log('[App] ws error : %s', error);
    };
    ws.onclose = (event) => {
        console.log('[App] Disconneted');
    };
   const wsSend = (data) => {
       ws.send(data);
    };
    return {
        isLogin,
        wsData,
        ws,
        wsSend
    };
}, {
    persist: true
});

 

<src/App.vue>

<template>
    <div>
    	<router-view />
    </div>
</template>
<script>
import { IndexStore } from '@/store/index';

export default {
    setup () {
        const indexSotre = IndexStore();
        return {
            indexSotre
        };
    }
};

 

ws.send()를 사용해야 할 때는 App.vue에서 indexStore에 있는 wsSend 함수를 사용하면 된다.

 

끝!