References

https://pinia.vuejs.org/introduction.html#why-should-i-use-pinia

https://eggplantiny.github.io/blog/articles/pinia-a-new-statement-manage-plugin/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://dev.to/carlomigueldy/getting-started-with-vue-3-pinia-store-typescript-by-building-a-grocery-list-app-19km

Pinia의 정의

VueConf Toronto 2021에서 에반 유에 의해 소개된 Vue의 상태관리 플러그인으로

2019년부터 개발되어 현재까지 Vue의 최신 버전과 관련된 상태 관리 기능들이 업데이트 되고 있다.

Pinia의 특성

Pinia의 경우 Vue의 최신 버전에 따라 여러 편리하고 강력한 기능들을 제공하는데 다음과 같다.

mutations이 없음

Vuex에서는 기본적으로 actions의 기능 내부에서 의도에 따라 상태 값을 변경하고자 할 때 mutations이 사용된다.

state : {
    // state 초기화
    number : 0
},

mutations : {
    // mutations 선언
    ADD_NUMBERS(state, payload) {
        state.number += payload;
    }
}.

actions : {
    // actions 선언
    triggerAction({ commit }, payload) {
    // commit으로 해당 mutations를 호출
    commit('ADD_NUMBERS', payload);
	}
}

그에 반해, Pinia는 actions에서 상태 값을 변경할 수 있어 mutations가 사용되지 않는다.

state: () => {{
    number : 0
}},

actions: {
    triggerActions(payload) {
        // this 예약어로 state 내부의 상태 값을 가져와 변경할 수 있다
        this.number += payload;
    }
},

getters: {
    getNumber(state) {
        return state.number;
    }
}

Composition API와의 좋은 호환성

Pinia의 경우 Vue3의 Compositions API를 이용한 개발 환경에 맞게 상태 관리를 할 수 있다.

import { storeToRefs } from 'pinia';
import { useNumberStore } from '@/store/sample'

export default {
    setup() {
        const numbers = useNumberStore();
				// storeToRefs를 통해 computed를 따로 선언하지 않고도 구조분해할당을 할 수 있다.
				const { getNumber } = storeToRefs(numbers);
        
        const onEvent = () => {
            /** state에 직접 변경할 수 있다 */
            //numbers.number++;
            /** autocompletion 기능 */
            //numbers.$patch({ number : numbers.number + 1 });
            /** state에 직접 변경할 수 있다 */
            numbers.triggerActions(1);
        }
        
        return {
            onEvent,
            getNumber,
        }  
    }	
}

구조분해할당 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

Typescript 지원

Typescript를 통해 상태관리에 있어서 타입 지정을 보다 명확하게 할 수 있다.

state : {
    // state 초기화
    number : 0
},

mutations : {
    // mutations 선언
    ADD_NUMBERS(state, payload: number) {
        state.number += payload;
    }
}.

actions : {
    // actions 선언
    triggerAction({ commit }, payload: number) {
    // commit으로 해당 mutations를 호출
    commit('ADD_NUMBERS', payload);
	}
}

namespaced modules이 없음

Vuex에서 사용되는 모듈 독립 재사용 여부를 따로 정할 필요가 없다.

namespaced: true // true인 경우 모듈 독립 재사용 허용

저작자표시