[vue] store에 저장해놓은 list 자식 컴포넌트에서 쓰기

store에 리스트로 정리해놓은 값을 자식컴포넌트에서 뿌려주기~!

1.Store에 리스트 저장

calendar: {
      year: [
        { name: '2023', value: '2023' },
        { name: '2022', value: '2023' },
        { name: '2021', value: '2023' },
        { name: '2020', value: '2023' },
      ],
      month: [
        { name: '01', value: '01' },
        { name: '02', value: '02' },
        { name: '03', value: '03' },
        { name: '04', value: '04' },
        { name: '05', value: '05' },
        { name: '06', value: '06' },
        { name: '07', value: '07' },
        { name: '08', value: '08' },
        { name: '09', value: '09' },
        { name: '10', value: '10' },
        { name: '11', value: '11' },
        { name: '12', value: '12' },
      ],
    },

2-1. 사용하려는 자식컴포넌트로 가기

export default {
  computed: {
    ...mapState('사용하는 스토어명', ['calendar']),
  },
};

스토어에서 어떤 상태값을 사용할것인지 computed에 적는다. calendar를 가져올 것이니 캘린더를 적음.

2-2. 컴포넌트에 template에서 사용

<li>
              <TheDropdownBox :list="calendar.year" />
              <TheDropdownBox :list="calendar.month" />
</li>

저기서 :list는 내가 드롭박스 컴포넌트에서 props로 받아오는 list이고list: [Array, Object],라고 props를 적어놨었다. 여기선 list로 "calendar.month"를 사용하겠다는 의미.