📚 공부한 내용

Pinia

특강을 통해서 기존에 배운 상태관리 라이브러리 vuex와 비교하여 pinia가 가지는 특징에 대해서 알아보는 시간을 가졌다.

모듈화

vuex는 createStore의 입력에 modules 속성을 이용해서 모듈을 등록할 수 있으며 모듈 등록 없이도 사용이 가능하다.
반면 pinia는 모듈 사용이 필수적이다. 각각의 모듈은 defineStore를 사용해서 생성하며 첫 번째 인자로 고유한 모듈명이 두 번째 인자로 state와 관련된 정보가 담긴 객체가 필요하다.

store 등록

vuex에서는 state나 getters를 컴포넌트의 computed에 등록하여 반응형 데이터로 사용하거나 mapState, mapGetters 같은 helper 함수를 사용했다.
pinia의 경우 모든 store의 접근이 이런 helper 함수를 사용하는 것이 강제된다. 또한 mapGetters 함수가 없고 getters의 값은 mapState에서 같이 등록이 가능하다.

state 접근

vuex에서 getters나 mutations의 메서드를 정의 할 때 함수의 매개변수로 state를 입력받아 이를 이용해 store의 state 값에 접근할 수 있었다.

	getters: {
    	doubleCount(state) {
          return state.count * 2
        }
    }

pinia에서는 단순히 this를 사용해서 state에 접근이 가능하다.

	getters: {
    	doubleCount() {
          return this.count * 2
        }
    }

state 변경 권한

pinia와 vuex의 가장 큰 차이점이라고 생각되는 것이 이 부분이었다.
vuex에서는 state의 변경은 반드시 mutations를 통해서만 가능했다. 따라서 언제나 commit을 사용해 state의 값을 바꿔야 했다.
pinia에서는 이러한 제한이 전혀 없다. store 내부의 actions에서도 this.state 로 접근하여 바로 수정이 가능하며, 컴포넌트에서도 defineStore가 반환한 인스턴스를 사용해서 state를 수정할 수 있다.

추가적인 메서드

$reset

store에 있는 state를 초기값으로 설정하는 메서드이다. vuex의 경우는 초기 상태를 별도로 저장하고 초기화 동작을 하는 actions를 만들어야 하는 걸 생각하면 매우 유용한 메서드 같다.

$patch

state를 변경할 수 있는 메서드이다. 객체를 사용해서 한번에 여러개의 state를 변경할 수도 있으며, 함수를 이용해서도 변경이 가능하다.
함수를 이용한 state 변경은 state를 참조할 때 값의 평가가 순서대로 이루어진다.

예를 들어, 다음과 같은 state가 있다고 가정하자
{ age: 17, cost: 1500 }
나이가 20살 이상부터는 cost를 3000으로 하고싶다. 객체를 이용해서 state를 다음처럼 갱신한다고 가정하자.
store.$patch({ age: 24, cost: this.age >= 20 ? 3000 : 1500})
state는 어떻게 바뀔까? 다음과 같다. { age: 24, cost: 1500 }
객체 안의 age의 평가는 바로 이루어져 cost가 24로 바뀌기 전인 17로 평가되고 그 결과 삼항 연산자를 통해서 1500으로 평가되는 것이다.
여기서 함수를 이용하면 아래와 같이 사용할 수 있다.

store.$path((state) => {
	state.age = 24
    state.cost = state.age >= 20 ? 3000 : 1500
})

입력된 함수는 순차적으로 실행되어 평가가 순서대로 이루어진다. age는 24로 변경되고, cost를 변경하는 시점에서는 age가 24로 평가가 되어 cost가 3000으로 변경된다.

예시는 아주 단순해서 크게 특별하다는 느낌을 받지 못했는데, 사용하는 방식이나 프로젝트의 크기에 따라서 유용하게 사용할 수 있을 것 같다는 생각도 든다.

---

Reference

1. 프로그래머스 프론트엔드 데브코스