[Nuxt] 상태관리 라이브러리 Pinia 사용 및 설정하기

이전에 vue로 프론트 작업할때는 vuex 상태관리 라이르러리를 사용했었는데
nuxt로 작업하면서 pinia를 사용해 보았습니다.
vue 공식사이트에서는 pinia를 사용하도록 권장하고 있는것 같습니다.

오늘은 nuxt에서 pinia를 사용해보면서 경험한 부분을 환경설정 하는 것처럼 정리해보고자 합니다.
개인 환경에 따라서 다를 수 있습니다.
저는  nuxt3, mac환경입니다. 여기서는 제 프로젝트 기준으로 정리를 할 것이니 참고 부탁드립니다.

프로젝트 환경

• Node: 16.18.1
• Nuxt: 3.0.0
• Node PM: npm 8.19.0

Pinia 설치

• pinia, @pinia/nuxt, pinia-plugin-persistedstate 설치해 줍니다.
• pinia-plugin-persistedstate 는 새로고침시에도 상태값을 유지해주는 플러그인입니다.

nuxt.config 설정

• nuxt.config.ts 파일안의 modules에 @pinia/nuxg를 추가해 줍니다.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

pinia store 만들기

• pinia는 state, getters, actions으로 이루어져 있습니다.
• vuex에 있던 mutations는 deprecated 되었습니다.
• pinia는 옵션 api, composition api둘다 지원하는데 여기서는 composition api형식으로 만들어 보겠습니다.

아래 예는 공식사이트에서 제공하는 예입니다.

// store/index.ts

import { defineStore } from "pinia"

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  const doubleCount = computed(() => count.value * 2)

  return { count, increment, doubleCount }
})

pinia store 사용해보기

// view/test.vue

<template>
  <div>
    <input type="button" @click="store.increment()" value="increment">
    {{ store.count }}
    {{ store.doubleCount }}
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "../stores/counter"

const store = useCounterStore();
</script>

<style scoped></style>

참고

Pinia 공식