vue2, vue3의 차이점 (Pinia)

롱 Nam·2023년 6월 9일
0

최근 vue2 -> vue3,nuxt3 로 마이그레이션 하는 프로젝트들이 제법 많이 보이곤 한다.
vite, ts, composition api 등이 도입 되며, 성능, 개발환경,코드 스타일 말이 안되게 좋아졌다고 한다.
또한 vutify 의 vue3 지원과, nuxt3 의 vue3 지원등 이러한 업그레읻들이 안정화까지 마쳤다고 한다.
그리고 ... vue2 의 지원이 2023 년 12월 31 일 부로 종료될 예정이라고 한다..

Vuex를 사용하지 않는다고 ??????

react는 다양한 상태관리 라이브러리 들이 많다.
대표 적으로 redux, recoil 등.. 하지만
vue 는 지금까지 vuex 원툴 이였다.
사실 상태관리 모듈을 별도로 install 하지 않고 굉장히 쉽고 간단하게 직접 구현하거나 composition API 로 전역상태를 관리 할 수 있다

// store.js  composition API 
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

... 
// 전역상태를 사용할 componenet 에서 
<script setup>
import { store } from './store.js'
...
</script>

<template>
  <button @click="store.increment()">
    B 컴포넌트에서: {{ store.count }}
  </button>
</template>

물론 추론이나 devTools 과 같은 helper 들, 또 스토어 규모,팀 규모 가 커질수록 코드 컨벤션, 규칙 때문에라도
무조건 외부 모듈을 install 하는게 좋다.

vue3 공식문서에 보면 공식 상태관리 라이브러리 피니아(Pinia) 라고 작성되어 있다.
Vue 핵심 팀이 유지 관리하며 Vue 2 및 Vue 3에서 모두 작동한다.

기존 Vue 사용자는 이전 공식 상태 관리 라이브러리인 Vuex에 익숙할 수 있다.
Pinia가 생태계에서 동일한 역할을 수행하면서 이제 Vuex는 유지 관리 상태에 있다.
여전히 작동하지만 더 이상 새로운 기능이 추가되지 않다.
새로운 앱에는 Pinia를 사용하는 것이 좋다.

Pinia는 Vuex 5의 핵심 팀 논의에서 나온 많은 아이디어를 통합하여 Vuex의 다음이 어떤 모습일지 탐구하는 것으로 시작했습니다.
결국 우리는 Pinia가 이미 Vuex 5에서 원하는 것을 대부분 구현하고 있다는 것을 깨닫고 이것을 새로운 권장 사항으로 적용하기로 결정했습니다.
Vuex와 비해 Pinia는 더 간단한 API를 제공하고,
Composition-API 스타일의 API를 제공하며, 가장 중요한 것은 TypeScript와 함께 사용할 때 견고한 유형 추론을 지원합니다.
출처 : 공식문서

(1) 타임라인, 컴포넌트 검사, time-travel 디버깅을 포함하여 Vue 개발자도구와 통합
(2)핫 모듈 교체(HMR)
(3)서버 사이드 렌더링 지원 (Nuxt.js)
(4) 훨씬 가벼움

Vuex 보다 더 사용하기 용이하고 그냥 Compositition API 그대로 사용하는 느낌이다

// compositionAPI 를 그대로 사용 할수 도 있습니다.  이건 사실 pinia 가 없어도 가능하지만, devTools 때문에 ..?  
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})


// 사용할때 

<script setup>
	const store = useCounterSotre(); 
   //  ...  
</script>
profile
매번 꺾여도 하는 마음

0개의 댓글