[Vue 2] Instance Properties 추가하기(전역 속성 추가하기)

vue로 개발을 하면서 조금 더 깔끔하게 코드를 쓰는 법에 대해 많이 고민하고 있는데

그 중에 자주 쓰는 값 같은 경우 데이터 사전으로 정리하는 것이 편하고, 확장성도 좋다 라는 말을 멋진 지인이 알려줘서

초반 앱과 다르게 두번째 개발 앱부터는 데이터를 사전 형식으로 정리하고 그것을 전역 속성으로 셋팅해줘서 모든 파일에서 사용할수 있도록 하려고한다.

 

우선 나같은 경우는 components/common 안에 dict이라는 폴더를 하나 만들고 그안에 데이터 사전을 정리하려고 한다.

(맞는 방법인지는 잘 모르겠지만..)

 

components/common/dict안에 UserType.js라는 파일을 만들고

export const userType = {
  hyejin: {
    code: 0,
    kor_name: '혜진',
    eng_name: 'hyejin'
  },
  jinhye: {
    code: 1,
    kor_name: '진혜',
    eng_name: 'jinhye'
  },
  juhye:{
    code: 2,
    kor_name: '주혜',
    eng_name: 'juhye'
  }
}
export default userType

이런식으로 정의를 해줬다.  여기서 엄청큰 실수를 했는데...

export default 를 설정해줄 때에 { } 로 한번 더 감싸는 바람에 object.keys()를 사용해서 값을 찾아낼때에 내가 원하는 값을 가져오지 못햇다는 것이다.

거의 30분을 헤멨는데.. { } 로 한번더 감싼게 이유였다

(잊지 않기위해 적는 블로그..)

 

이런식으로 정리를 해줫으면 이제 전역 속성으로 설정을 해줘야 하는데

Main.js 파일안에

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';
import '@/plugins/vee-validation';
import userType from '@/components/common/dict/UserType'

Vue.config.productionTip = false;
Vue.prototype.$userType = userType

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

Vue.prototype로 셋팅을 해준다.

$가 붙는 이유는 vue에서 사용 하는 인스턴스 속성 규칙인데 이렇게 하면 정의된 데이터나 메서드와의 충돌을 피할수 있다.

 

사용할때는  this.$userType로 사용 할수 있다.

어떻게 사용했는지는 Object.keys()를 기록할때에 볼 수 있을 것 같다.

 

지인에게 이기능을 설명할때에 전역으로 해줬다고 했다가 의사소통에 혼란이 왔었다.

공식 사이트에서는 Instance Properties 라고 명시하고 있으니 전달할때도 공식사이트에서 이야기하는 대로 전달하자!