Pinia 적용 배경
기존 프로젝트는 Vue2 위에서 Typescript를 적용하다보니 타입 정의가 매우 복잡했는데요. (참고로 vue3+vuex4 사용 시 더 편해졌다고 해요.)
예를들어 Action 별, Mutation 별, 각 타입 지정을 위해 Enum으로 함수명을 정의해야하고 또 각 타입들을 하나의 스토어로 정의하는 과정도 필요했습니다.
또한 타입 추론 덕분에 자동완성된 내용을 활용하여 접근할 수는 있지만 코드가 점점 복잡해보였습니다. (타입 추론을 활용하기 위해 Vuex Helper 함수들은 사용하지 않았었어요.)
-
스토어의 namespace global 모듈의 aa객체의 bb 속성에 접근
- store.state.global.aa.bb.~
-
Enum으로 정의해둔 MutationType을 활용하여 Mutation 호출 (Commit)
- store.commit(GlobalMutationTypes.SET_SIGNED, data);
-
Enum으로 정의해둔 ActionType을 활용하여 Action 호출 (Dispatch)
- $store.dispatch(BizActionTypes.FETCH_ITEM_LIST);
Pinia (공식 문서)
- vuex를 대체할 상태 관리 플러그인
- VueConf Toronton 2021 에서 Vue의 창시자 Evan You가 상태 관리 플러그인으로 vuex가 아닌 Pinia를 추천
왜 Pinia를 사용하나요?
- 일단 사용이 쉽습니다. (사용법은 밑에 간단하게 소개해두었습니다.)
- mutations이 없습니다.
- 상태 변경을 위해 Mutations을 정의하고 Commit하는 과정이 필요없습니다.
- 그저 Vue 인스턴스의 state 값을 변경할 때 처럼 read/write 하면 됩니다.
- Typescript를 지원하기 위해 복잡한 래핑을 하지 않아도 됩니다.
- Pinia는 이미 TypeScript 를 통한 유형 추론을 최대한 활용할 수 있게 만들어져있습니다.
- 굳이 타입을 별도로 지정해주지 않아도 타입 추론이 가능해요.
- namespace modules 없음
- devtools 도 지원합니다. (단 최신 버전을 사용해야합니다.)
사용법
스토어 정의
- store/xxx.ts 생성
- 기존 Vuex를 사용할 떄와 같이 State에는 상태 관리할 변수, actions 에는 서버에서 데이터를 받아와 상태 변경 등, state에 뭔가 계산이 필요한 경우 getters 를 정의합니다.
// 예시) app.ts
import { defineStore } from 'pinia';
// defineStore<모듈명, 타입>
export const useAppStore = defineStore('app', {
state: () => ({ drawer: false, lastName: 'test' }),
actions: {
changeDrawer() {
this.drawer = !this.drawer;
},
},
getters: {
getFullName(firstName: String) {
return firstName + lastName;
}
}
});스토어 사용 - State
-
간단하게 useAppStore()로 store를 가져와 store 내 state에 접근하면 됩니다.
-
mutation이 없기 때문에 state 값을 v-model 에 사용할 때도 기존 vuex를 사용할 때와 같이 setter 를 따로 정의해주지 않아도 됩니다.
-
기존 vuex 코드 (v-model 사용시)
-
Pinia 활용 코드
<input v-model="store.drawer"/>export default {
setup() {
const store = useAppStore();
return { store }
}
}- 주의할 점은 구조분해 할당 시 반응성을 잃는다는 점입니다.
// 이렇게 선언할 경우 drawer는 초기값으로 계속 남아있습니다.
const { drawer } = useAppStore();- appStore 전체 말고 개별로 내보내고 싶은 경우에는 아래와 같은 방법이 있습니다.
// 1. 기존과 같이 computed 활용 (값의 변경도 필요한 경우 setter도 정의 필요)
return {
count: computed(() => store.count)
}// 2. composition API의 toRefs 활용
const { drawer } = toRefs(useAppStore());
return { drawer }storeToRefs
Pinia 공식 문서에는 두번째 방법 (composition API의 toRefs 활용) 으로 storeToRefs를 활용하라고 나와있는데요.
현재 Vue2에서 적용이 안됩니다. 😢(#852)
Pinia의 storeToRefs 는 composition API의 toRefs와 비슷하게 동작하는데 단 Method 같은 속성은 무시하고 가져옵니다.
- Composition API - toRefs
- 리액티브 객체를 일반 객체로 변환하여 반환하지만, 반환되는 객체의 각 프로퍼티들이 ref로 원래의 리액티브 객체 프로퍼티로 연결됩니다.
스토어 사용 - Getters
<template>
<div>
fullName: {{ fullName }}
</div>
</template>export default {
setup() {
const store = useAppStore();
return { fullName: store.getFullName }
}
}스토어 사용 - Action
<template>
<div>
<v-btn @click="store.changeDrawer">테스트</v-btn>
</div>
</template>export default {
setup() {
// #1 통째로 내보내기
const store = useAppStore();
return { store }
// #2 특정 액션만 내보내기
// const store = useAppStore();
// return { changeDrawer: store.changeDrawer }
}
}요약
- 사용법이 매우 간단하다. (= 러닝커브가 낮다.)
- 모듈단위로 작성하기 때문에 모듈이 많아져도 복잡해지지 않는다.
- 신경쓰지 않아도 타입 추론을 알아서 해준다.
마치며
Pinia를 적용하고 기존 Vuex를 사용했을 때 보다 훨씬 사용이 간단해졌다고 느꼈습니다.
현재 Pinia 는 Vue의 공식 플러그인은 아니지만 추후 Pinia와 vuex 두 개의 프로젝트를 하나로 합치거나 쉽게 이동할 수 있도록 지원할 예정이라고 합니다.
새로운 프로젝트가 Vue2 + Typescript 환경일 때 상태 관리가 필요한 경우 Pinia 적용을 고려하셔도 좋을 것 같습니다.
