2023년 10월 18일 수요일

[Nuxt3] Nuxt3에서 Pinia 설치하고 사용

 

[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





댓글 없음: