[VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정)

Pinia란?

Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다.

일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용해야 한다.

 

Vue에서 가장 보편적으로 사용했던 상태 관리자는 Vuex인데,

Vue의 창시자 Even You가 Vuex가 아닌 Pinia를 추천하는 상태 관리자로 공표하였다.

 

하지만 그렇다고 Vuex가 사라지는 게 아니라 Pinia와 Vuex 5.x는 사실상 완전 동일한 프로젝트로 생각해야 한다고 한다.

이는 현재 Vuex 4.x 버전이나 추후에는 Pinia와 Vuex 5.x 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 것이라고 한다.

왜 Pinia를 사용해야 하는가?

사실 개인적으로는 당장이라도 사용해야 할 이유가 많다고 생각된다.

1. Typescript 지원

특히 Typescript 지원 하나만으로도 충분한 이유가 된다고 생각되는데, Vuex의 경우에 Typescript와 같이 사용하고자 하면 처리해 줘야 하는 부분들이 많지만 Pinia의 경우 자체적으로 지원해주기 때문에 신경 쓸 필요가 없다.

2. SFC와 Composition API 지원

Vuex에서는 SFC 문법과 Composition API를 지원하지 않는다.

Pinia에서는 SFC 문법을 지원하며, 가장 큰 장점은 Composition API를 기반으로 사용한다는 점이다.

Vuex와 같은 구조로 정의하지 않고 Composition API를 기반으로 정의할 수 있다는 것은, 가독성은 물론 Vuex에서의 module, namespace를 사용할 필요도 없이 필요한 것들만 import해와서 사용이 가능하다는 것이다.

 

예를 들어 아래와 같은 방식으로 사용이 가능하다.

▷ store 정의 1 (vuex와 유사)

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 다음과 같이 정의할 수도 있음:
  // state: () => ({ count: 0 })

  actions: {
    increment() {
      this.count++
    },
  },
})

▷ setup()과 유사하게 store 정의 2

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

  return { count, increment }
})

이처럼 store를 정의하는 방법은 Composition api를 사용한 setup()과 유사하게 할 수도 있고 기존에 vuex에서 하던 것처럼 정의해도 된다.

▷ 정의한 store 사용

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // 자동 완성 기능 ✨
    counter.$patch({ count: counter.count + 1 })
    // 또는 actions 사용
    counter.increment()
  },
}

3. 구성요소 변경

Vuex와의 차이점은 바로 mutation이 제거됐다는 점이다.

사실 Vuex를 사용하면서도 mutation과 actions를 굳이 나눠놓은 것에 의문을 표했었는데, 드디어 actions 하나로 합쳐졌다.

 

즉, Pinia에서는 Vuex와는 다르게 mutation이 제거되고 actions에서 상태를 모두 제어한다고 보면 된다.

또한 2번에서 설명한 것처럼 module과 namespace 역시 사라졌다.

4. 기타

그 외에도 공식 문에서 정의한 바로는,

Devtools 지원, SSR 지원, 플러그인을 통한 기능 확장 등의 이유가 있다.

(사실 1~3번의 이유만으로도 Pinia를 사용하는 이유로 충분하다 생각된다. 그 외에도 좋은 점이 많다니 오히려 좋다.)

Pinia 설치 및 설정

Pinia를 사용하기 위해 설치 및 설정을 진행하고 직접 사용해보자. (본문에서는 설치와 설정만 진행한다.)

설치하는 과정에서 재미난 점은 vue-cli를 현재 사용하고 있는 사용자를 위해 비공식 플러그인을 제공하고 있다는 점이다.

 

그리고 진행하기 전에 공식 문서에서는 Vue 2.6.x 이하 버전을 사용하는 경우, Composition API를 설치해야 한다고 한다.

아무래도 최근에 Vue 2.7.x 버전이 추가되었는데 여기서부터는 Composition API를 지원하기 때문에 그런 것 같다.

Vue 버전을 최신 버전으로 변경하거나 아니면 Vue3로 먼저 갈아타는 것을 추천한다.

(만약 현재 환경이 Nuxt라면 이 지침을 따르면 된다고 안내한다.)

비공식 플러그인 제공

https://github.com/wobsoriano/vue-cli-plugin-pinia

GitHub - wobsoriano/vue-cli-plugin-pinia: Vue Cli Pinia plugin

물론 공식 문서에서 안내해주고 있는 주소이다.

vue add vue-cli-plugin-pinia

위와 같은 명령어를 통해 vue-cli 프로젝트에 알아서 추가되도록 할 수 있다.

직접 설치 및 설정

우선 pinia를 설치를 진행해주자.

npm install pinia

그리고 Vuex를 썼을 때처럼 앱에 플러그인을 전달해주면 된다.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

여기서 만약에 Vue2를 사용하는 경우 아래와 같이 안내를 해주고 있다.

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 다른 옵션들...
  // ...
  // 동일한 `pinia` 인스턴스를
  // 동일한 페이지 내 여러 Vue 앱에서 사용될 수 있음
  pinia,
})

이제 설정마저 마쳤으니 "직접" 사용해보러 가보자.

---

참고: https://pinia.vuejs.kr/

Vue 3의 공식 Store | Pinia

참고: https://pinia.vuejs.org/

Pinia 🍍

참고: https://www.univdev.page/posts/about-pinia/

Vue3에서 사용되는 상태 관리자, Pinia

참고: https://velog.io/@eggplantiny/Pinia-Vuex-%EB%A5%BC-%EB%8C%80%EC%B2%B4%ED%95%A0-%EC%83%88%EB%A1%9C%EC%9A%B4-Store

Pinia - Vuex 를 대체할 새로운 Store!