Vue 새로운 상태 관리 Pinia

Pinia는 Vue의 새로운 상태관리?
기존 Vuex 와 비교 해보자

갑자기 새로운 상태관리?

VueConf Toronto 2021에서 Vue 제작자(Evan You)가 직접 
추천하는 상태 관리 플러그인을 Vuex 가 아닌 Pinia 로 공표

Pinia 공식 사이트

• Vuex 5 의 구현체로 Pinia 를 작성
• Vue2/3 두 버전 지원
• Typescript 지원
• Vuex 보다 심플한 구성
• 공식적으로 지원하는 devtools 존재

---

▪︎ Pinia 기본 구조

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

• state, actions, getters의 구조
• Vuex와 다르게 mutations 이 없어지고 action에서 처리
• mutations 이란 Vuex 의 데이터, 즉 state 값을 변경하는 로직들을 의미한다.
  1. 인자를 받아 Vuex 에 넘겨줄 수 있고
  2. computed 가 아닌 methods 에 등록
  3. Vuex에서는 비동기 로직은 action에 그 외 mutations 에 정의를 했었다.

export const store = new Vuex.Store({
  // ...
  mutations: {
    addCounter: function (state, payload) {
      return state.counter++;
    }
  }
});

• Pinia는 모든 로직을 actions 에서 처리한다.

  ---

<script setup>
import { storeToRefs } from 'pinia';

const store = useCounterStore();

const { name, doubleCount } = storeToRefs(store);

const { increment } = store;
</script>

• state 스토어가 인스턴스화되면 getters 및 actions 스토어에서 직접 정의된 속성에 액세스할 수 있다.

• Vue 에서 구조분해할당을 사용하면 반응성이 없어지기 때문에 storeToRefs 함수로 묶어서 사용해야한다.

Reference

• Pinia 공식 사이트