KKUSAENG

Vue - Pinia 상태 관리

프로젝트
프로젝트
카테고리
Dev
작성일
2023-05-12
태그
TIL
JavaScript
작성자
꾸생
상태
공개
notion image
 
새로운 업무가 주어져 TIL(Today I Learned) 바로 시작한다. 진행하는 프로젝트는 Vue3 + Pinia를 사용하고 있다. (타입스크립트는..) Vue에서 Vuex 말고는 사용해본 경험이 없어 이름조차 처음 들어봤다.

Pinia 공식문서

Pinia 🍍
Intuitive, type safe, light and flexible Store for Vue
Pinia 🍍
https://pinia.vuejs.org/introduction.html
Pinia 🍍

특징

  • Vuex 보다 쉬움
  • DevTools 지원
  • HMR(Hot Module Replace) 지원
  • 플러그인 기능 확장
  • TS지원
  • SSR지원

Pinia Guide

1. 설치

yarn add pinia
# or with npm
npm install pinia

2. 스토어 생성(Composition API)

// src/stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCountStore = defineStore('counter', () => {
  const count = ref(0)
  const increase = () => {
    count.value += 1
  }
  const getCount = () => computed(() => count.value)
  return { count, getCount, increase }
})
  • 스토어 변수는 ref()를 사용하면서 state 속성으로 선언
  • Vuex의 getters는 getCount 함수 처럼 computed()로 구현
  • increase() 함수는 actions 역할
스토어 선언 객체 하나에 스토어 변스와 getters, actions로 구성되어 기존 Vuex 보다 단순한 구조

3. 스토어 연결

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

4. 사용

<template>
  <div>
    <div>{{ getCounter() }}</div>
    <button @click="increase ">증가(+)</button>
  </div>
</template>

<script setup>
import { computed, ref } from "vue"
import { useCountStore } from "./stores/counter"

const { getCounter, increase } = useCountStore()

</script>
Vuex는 getters, actions, mutations 등 구조화되어 아는 만큼 잘 사용할 수 있지만 그만큼 진입장벽이 높다는 단점이 있어서 그런지 Redux에서 Zustand로 마이그레이션 하는 느낌을 받았다.

Vuex vs Pinia

Vuex에 있던 Mutations가 제거됐고, 사용할 때 commit, dispatch, selector 등, 추가적인 API 사용이 불필요하다는 점이 가장 좋더라 👍