[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 프로젝트가 설치된 상태에서 시작

yarn add pinia @pinia/nuxt # or with npm npm install pinia @pinia/nuxt

Tip: npm을 사용하는 경우 종속성 트리 오류를 해결할 수 없는 ERESOLVE가 발생한다고 한다.

nuxt.config.ts에 설정하기

modules에 @pinia/nuxt를 작성하고 imports로 pinia 스토어 모듈을 검색할 디렉터리를 구성합니다. 그리고 pinia 옵션으로 'defineStore'와 HMR 핫모듈 교체 활성화하는데 필요한 'acceptHMRUpdate'를 설정합니다.

// nuxt.config.ts export default defineNuxtConfig({      // ... other options     modules: [         '@pinia/nuxt',     ],     imports: {         dirs: ['./stores']     },     pinia: {         autoImports: ['defineStore', 'acceptHMRUpdate']     }, })

Pinia 사용하기

먼저 root경로에 stores 폴더를 생성합니다. 그리고 예시로 auth.ts 파일을 만들어봅니다. 

간단한 예시로 아래와 같이 구현해 봅니다.

interface IUser {     email: string     name: string } // auth 스토어 export const useAuthStore = defineStore('auth', {     state: () => ({         user: {             email: '',             name: ''         } as IUser     }),     getters: {         getEmail: (state): string => state.user.email     },     actions: {         setUser(data: IUser) {             this.user = data         }     } }) if (import.meta.hot) {  //HMR     import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot)) }

Info : HMR은 개발 중에 애플리케이션을 수정할 때 페이지를 새로 고치지 않고 변경 사항을 빠르게 반영하는 데 사용됩니다. 

Nuxt3 page에서 테스트

page에 index.vue 파일을 생성하고 아래처럼 구현하여 테스트합니다.

스토어를 import 하여 위에서 구현한 actions을 버튼 이벤트로 설정하고 삽입된 데이터를 보기 위해 getters에서 정의한 email데이터를 반응형 객체로 변환하여 사용합니다.

 

<template>   <div>     <v-btn @click="handleLogin">로그인</v-btn>     <div>{{ getEmail }}</div>   </div> </template> <script setup lang="ts"> import { storeToRefs } from 'pinia' import { useAuthStore } from '~/stores/auth' // 스토어 생성 const authStore = useAuthStore() // 반응형 객체로 변환 const { getEmail } = storeToRefs(authStore) const handleLogin = () => {   const user = {     email: 'test@naver.com',     name: 'kim'   }   authStore.setUser(user) } </script> <style scoped></style>

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