[Vue] 전역함수 만들기 (자체 라이브러리 만들기)

개요

vue 에서 쉽게 세션을 저장하고 가져오는 라이브러리인 vue-sessionstorage를 사용하였는데 구동방식을 보니 초기 진입시 sessionKey라는 난수를 설정하고 해당 난수로 data 들을 오브젝트 형태로 저장하는 구조였다. 하지만 가끔 sessionKey 값을 초기에 세팅하지 않는 오류가 발생하여 해당 세션 data에 정상적으로 접근을 못하여 라이브러리를 걷어내고 web에서 자체 지원하는 web api 를 사용해 비슷한 구조를 만들기로 했다.

전역함수로 만들 js 파일 만들기

// session.js
export default {
    install(Vue) {
        Vue.prototype.$sessionSet = (key, value) => {
          const payload = {
              [key] : value
          };

          const storage = JSON.parse(window.sessionStorage.getItem("data"));

          const data = JSON.stringify(payload); // 문자열로 변환

          sessionStorage.setItem("data", data);
        }
    }
}

// main.js
import Vue from 'vue';
import $session from "/common/session.js";

Vue.use($session);

// App.vue

export default {
    name: "App",
      methods : {
        handleSession() {
          this.$sessionSet("name", "mk");
        }  
    }
}

이런식으로 설정을 하면 전역 함수(라이브러리) 처럼 사용이 가능하다.