[Nuxt3] Nuxt3에서 Pinia 설치하고 사용
Pinia란 - https://pinia.vuejs.org/
Pinia는 2019년 11월경에 Composition API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. Vue2와 Vue3 모두에게 작동 가능하고 구성된 요소/페이지 내부 상태를 공유할 수 있습니다. 그리고 Vuex와 유사하여 구현하기에 용이합니다.
개발 환경
2023년 10월 기준으로 Nuxt3와 pinia 환경에 대해서 설명합니다.
nuxt 3.7.4
@pinia/nuxt 0.4.11
pinia 2.1.6
설치 방법
Nuxt3 프로젝트가 설치된 상태에서 시작
Tip: npm을 사용하는 경우 종속성 트리 오류를 해결할 수 없는 ERESOLVE가 발생한다고 한다.
nuxt.config.ts에 설정하기
modules에 @pinia/nuxt를 작성하고 imports로 pinia 스토어 모듈을 검색할 디렉터리를 구성합니다. 그리고 pinia 옵션으로 'defineStore'와 HMR 핫모듈 교체 활성화하는데 필요한 'acceptHMRUpdate'를 설정합니다.
Pinia 사용하기
먼저 root경로에 stores 폴더를 생성합니다. 그리고 예시로 auth.ts 파일을 만들어봅니다.
간단한 예시로 아래와 같이 구현해 봅니다.
Info : HMR은 개발 중에 애플리케이션을 수정할 때 페이지를 새로 고치지 않고 변경 사항을 빠르게 반영하는 데 사용됩니다.
Nuxt3 page에서 테스트
page에 index.vue 파일을 생성하고 아래처럼 구현하여 테스트합니다.
스토어를 import 하여 위에서 구현한 actions을 버튼 이벤트로 설정하고 삽입된 데이터를 보기 위해 getters에서 정의한 email데이터를 반응형 객체로 변환하여 사용합니다.
storeToRefs는 Pinia에서 제공하는 유틸리티 함수 중 하나로, 스토어의 상태를 reactive 한 Vue ref 객체로 변환하는 데 사용됩니다. Vue의 ref는 반응적인 데이터를 만들고 추적하는 데 사용되며, 컴포넌트에서 상태를 사용할 수 있도록 합니다.
원문: https://stack94.tistory.com/entry/Nuxt3-Nuxt3%EC%97%90%EC%84%9C-Pinia-%EC%84%A4%EC%B9%98%ED%95%98%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90#Pinia%EB%9E%80-1