[TIL] vue.js, bootstrap-vue, Vuex, ES6(..., =>)

도무지 알 수 없었던 <b-form-group>태그의 정체

<b-form-radio-group> 속성으로 :options가 있었는데 둘 다 모르겠어서 난항,, 일단 Vue 공부를 닥치는대로 하다보니 v-bind:를 :로 줄여서 쓴다는건 알게됨. 이 내용은 vue 사이트에서도 간단히 확인이 가능한 내용임

그럼 우선 저 <b-form-radio-group> 태그에 v-bind:options="A"에서 options가 뭔진 모르겠지만 아무튼 computed속성에 A가 정의되어있겠구만 하고 파악하고, 우선 <b-form-radio-group> 태그와 options 속성 내용을 찾아봤음

찾아본 내용에서 아래 코드를 통해 대략 어떤 앤지 파악이 바로 되긴 함

<b-form-radio-group
          class="pt-2"
          :options="['Air', 'Courier', 'Mail']"
          :aria-describedby="ariaDescribedby"
></b-form-radio-group>

bootstrapVue라니,,

아무튼 아래 computed 속성을 가보니 산 뒤에 더 큰 산,,

computed: {
    ...mapGetters({
      typeOpts: 'app/typeOpts',
    }),

일단 찾아본 내용을 통해 대략적으로 이해하기로는 getters에서 옵션을 미리 어딘가에 정의를 해두고, 가져다가 쓰는 방식인 것 같았다. ...은 ES6 문법인 것 같고,,

여차저차 찾아보니 /app을 힌트삼아 찾아보니 getters를 찾았다.

const getters = { ...

또 모르는 ES6 문법을 알게됐다.

typeOpts: s => s.ltypes,

결론은 ltypes는 state에 정의된 바에 따라서 구분 값인 key값을 가져오는 것 같음 대강 끼워맞추면서 배운거같은데 영 찜찜함 vue 자체도 생소한데 js 공부를 너무 안했나 싶네 이번 기회에 확실하게 배울 수 있길