Vue의 새로운 상태 관리 라이브러리 Pinia를 써본 경험과 Vuex와의 차이점

전체적으로 Pinia가 좀 더 최신 트렌드를 반영하고, 자바스크립트 다워졌다고 생각합니다.

좀 더 React 라이브러리처럼 쓸 수 있게 변했다 해야하나? 전체적으로 Vue 3가 독자 문법같은 노선에서 자바스크립트 표준 문법 노선으로 간 것 같아 마음에 듭니다.

 

Pinia의 경우에는 state 선언 방법이 이렇습니다.

import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { name: 'Shoes', price: 30000 },
      { name: 'Apple', price: 5000 }
    ]
  }),
  getters: {
    productCount(state) {
      return state.products.length
    },
    productsCheaperThan(state) {
      return (price) => (
        state.products.filter(product =>
          product.price < price
        )
      )
    }
  },
  actions: {
    addProduct() {
      this.products.push()
    }
  }
})

 

이렇게 defineStore를 사용하여 store를 선언하고, state와 getter, action을 선언할 수 있습니다.

 

 

Vuex 3.x의 경우에는 Vuex.Store를 만들어서 export한 후에 Vue에서 use하게 하는 방식이었죠.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

 

 

사용법은 조금 차이가 납니다. Vuex 3.x의 경우에는 Vue 컴포넌트에서 this.$store.state나 store.state로 접근한 반면에, Pinia에서는 직접 import하여 사용합니다.

<script setup>
  import { useProductStore } from './stores/ProductStore'
  const store = useProductStore()
</script>
<template>
  <ul>
    <li v-for="product in store.products">
      ...
    </li>
  </ul>
  <p>{{ store.productCount }}</p>
  <ul>
    <li v-for="product in store.productsCheaperThan(10000)">
      ...
    </li>
  </ul>
  <button @click="store.addProduct(somethingProduct)">Add</button>
</template>

약간 React를 보는 것 같지 않나요? store를 import하고, useProductStore를 사용하여 store 변수를 따로 만들어주는 것까지.

 

저는 Vuex 3.x에 비해 이 방법이 매우 마음에 듭니다. 각자 이렇게 import하는 게 번거로울 수 있지만, 전역 state로 몰빵하는 것 보단 낫고, 요즘 트렌드에 맞춰 가는 것 같아서 좋습니다.

 

Vue Mastery에서 Pinia Cheatsheet를 공유하고 있으니 꼭 참고하세요!

 

또한 Devtool에서는 이곳에서! 변수를 확인 할 수 있습니다.

 

 

https://pinia.vuejs.org

Pinia | The intuitive store for Vue.js