개발 도구 (Development Tools)/Vue

Vue - Pinia (Vue 상태관리 라이브러리)

BiCute 2022. 10. 10. 08:00
반응형

 

Pinia?

Pinia는 Vuex와 같은 상태 관리 라이브러리입니다.

얼마전 vuex 기본 사용법에 대한 글을 작성하였는데, 현재 Vue3를 지원하고 있는 Vuex는 버전 4입니다.

또한 Vue의 개발자인 Even You가 자신의 트위터에서 Pinia는 사실상 Vuex 5입니다! 라고 말하기도 했을 정도로 Pinia는 충분히 좋아졌고 안정적입니다.

 

 

 

달라진점은?

  (1) module을 store로 재구성

프로젝트가 커질수록 Vuex는 store를 모듈화 해서 여러개로 나누게 되는데, 이게 계속 중첩이 되고 타입스크립트나 다른 플러그인을 함께 사용하게 될수록 매우 귀찮아지는데, Pinia는 defineStore라는 함수를 이용하여 각각의 파일마다 별도의 store를 정의하여 module의 기능을 대신하고 있어, 사용성이 압도적으로 편리해집니다.

  (사실 pinia 얼마전에 써봤는데 vuex 모듈관련 글 엄청 열심히 적고있었는데 다 삭제해버림 =_= 업무에서도 다음 프로젝트부터는 pinia 무조건 권유할 예정)

 

  (2) mutation 삭제

  state, actions, getter를 사용합니다.

  •  state = 해당 스토어에서 사용되는 상태값 모음

  •  actions = state를 변화하는 함수들 (vuex처럼 mutations를 거치지 않고 직접 제어 가능)

  •  getter = state 값을 단순히 반환해주는 함수들

 

공식 차이점들 : https://pinia.vuejs.org/introduction.html#comparison-with-vuex-3-x-4-x

 

자 이제 샘플 예제를 이용해 직접 사용해 봅시다.

 

 

 

 

1. 설치하기

  터미널에 다음 명령어를 입력합니다.

yarn add pinia
# 또는 npm 방식으로
npm install pinia

 

 

 

2. Main.js에 등록

  앱에 플러그인을 등록합니다.

(main.js)

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')

 

 

3. store 파일 생성

  stores 폴더 만들고 counter.js 파일 생성.

  다음과 같은 형식으로 작성.

(stores/counter.js)

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => {
    return { 
        count: 0,
    };
  },
  actions: {
    increment() {
      this.count ++
    },
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2;
    },
    doublePlusOne() {
      return this.doubleCount + 1
    },
  },
});

 

 

4. 사용하기

  사용은 아래와 같이 입력해 봅니다.

(적용할 컴포넌트.vue)

<script setup>
  import { useCounterStore } from "@/stores/counter";
  const store = useCounterStore();
</script>
  
<template>
  <h1>Count is {{ store.count }}</h1>
  <h2>Double is {{ store.doubleCount }}</h2>
  <button @click="store.increment()">Increment</button>
</template>

<script>

</script>

 

 

 

반응형