Vue3 Vuex Computed

Posted on  by admin

우선적으로 알아두실 사항은 composition api은 옵션이라는 것입니다. 기존 vue2에서 사용하는 옵션 api를 사용하셔도 되고, 본인의 취향, 각 api의 장단점을 비교하여 composition api를 사용하여도 됩니다.

옵션 api에서 데이터를 다룰 때는 아래 예시 코드처럼 다룹니다. 현재는 하나의 data만 있기에 간단해보이지만 위 컴포넌트에 수많은 데이터가 공존했다면 methods, computed도 그만큼 많아지고, books가 어디서 어떤 함수에 의해 변하는지 분산되어 추적이 어려워 집니다. 즉, 하나의 데이터(books)가 어떻게 변화하고 사용되는지 그룹핑 하는 것이 어렵습니다.

그에 따라 유지보수가 어려워집니다. 컴포지션 api를 사용함으로 setup 함수에 데이터가 그룹핑 되어 보다 용이하게 데이터의 흐름을 파악하고 유지보수가 용이해집니다.

  • 또한 함수를 재사용하기가 용이합니다. 반복되는 코드 (필터링 등등)를 import하여 컴포지션 api 내부에서 사용함으로 유틸함수 재사용에 용이합니다.

  • 기존과는 다른 방식으로 setup 훅을 사용하고 그 내부를 이루는 요소는 아래와 같습니다.

  • 개인적으로 react와 유사한 형식을 가졌다고 생각합니다. setup 훅 내부에 data와 function을 구성합니다.

이때 구성되는 data는 아직 반응형이 아닙니다.

Add store states in Vue 3 using getters

반응형 data를 만들 때는 ref와 reactive를 사용합니다. 둘의 차이는 코드에서 설명하겠습니다. ref는 function에서 값을 변경할 때 ref.value를 넣어주고 값을 바꾸나 reactive는 바로 값을 바꿀 수 있습니다.

reactive는 원시값에 대해서는 반응형을 가지지 않습니다.