Vue의 상태관리 방법 간단 정리 (pinia, store)

Vue의 상태관리

🏠상태관리

- 애플리케이션의 상태(데이터)를 효율적으로 관리하는 것

 

 

🏠Vue의 상태 관리 구성

- Vue의 컴포넌트는 state, view, action 구성으로 상태를 관리하고 있다.

(1) state: 컴포넌트 내에 선언된 상태(data)

(2) view: 상태가 선언적으로 매핑된 템플릿(template)

(3) action: view에서 사용자의 입력에 대한 반응으로 state를 변경한다.(methods)

 

 

🏠Vue에서 상태를 공유하는 방법

(1) emits & props로 전달을 통한 관리

- 깊은 계층 구조를 가진 컴포넌트에선 provide와 inject를 통한 Prop Drilling 활용

- 이러한 코드는 유지관리가 힘들다.

 

(2) Reactivity api를 통한 관리

- 공유해야하는 상태를 reactive()를 사용하여 반응형 객체로 만들어서 사용.

- 간단한 애플리케이션에서 관리할 때 사용

 

(3) Pinia를 통한 관리

- 애플리케이션이 복잡해질 경우 협업을 위한 강력한 규칙이 필요할 때, SSR 지원이 필요할때 사용

 

 

🏠Pinia

- Vue3의 공식 상태관리 라이브러리

- 컴포넌트간 상태를 공유하는데 사용한다.

 

 

pinia 장점

(1) devtool 지원

- 추적 타임라인을 확인 가능

- 사용되는 컴포넌트에서 store 확인 가능

- 쉬운 디버깅

(2) Hot module replacement

- 페이지 리로딩 없이 store 수정 가능

- 개발하는 동안 기존 state 유지

(3) 플러그인으로 pinia 기능 확장

(4) ts 지원

(5) SSR 지원

 

 

vuex와의 비교

- Vue2의 Vuex 보다 더 간결하고 컴포지션api 스타일인 api를 지원.

- mutations 제거 (vuex의 mutation은 필요 이상으로 장황했따)

- TS 지원을 위한 복잡한 사용자지정래퍼 불필요함 (pinia는 ts타입 추론을 최대한 활용함)

- 강력한 autocompletion

- 아무튼 vuex 보다 훨씬 간단한 느낌

 

 

🏠store

store란

- 비즈니스 로직을 보유하고 있는 엔티티(집합)

- 언제 어디서든 사용 가능한 전역 컴포넌트 느낌(전역 상태 호스팅)

 - data, computed, methods처럼 state, getter, action 의 세 가지 개념이 있다

- 컴포넌트에서 충분히 관리될 수 있는 로컬 데이터는 store 포함을 피하자

 

 

store 정의하기

import { defineStore } from 'pinia'
// useStore는 useUser, useCart와 같을 수 있습니다.
// 첫 번째 인수는 애플리케이션 전체에서 스토어의 고유 ID입니다.

export const useStore = defineStore('고유ID', {
    // 다른 옵션...
})

- defineStore()를 통해 정의.

- 꼭 이름이 필요하다 (고유ID)

- 함수 이름은 use어쩌구로 지정하는 게 국룰

- 각 store는 다른 파일에 정의한다.

 

 

store 사용하기

import { useStore } from '@/stores/counter'

    export default {
    setup() {
        const store = useStore()
        return {
              // 템플릿에서 사용하기 위해 전체 스토어 인스턴스를 반환할 수 있습니다.
              store,
        }
    },
}

- store를 가져와서 정의하여 사용

- store는 reacitve로 래핑된 객체라서 구조 분해 할당이 불가능.

 

 

store에서 반응성 유지한 채로 구조분해할당하기

import { storeToRefs } from 'pinia'

export default defineComponent({
    setup() {
        const store = useStore()
        
        // `name`과 `doubleCount`는 반응형 참조입니다.
        // 플러그인에 의해 추가된 속성에 대한 참조도 생성됩니다.
        // 그러나 모든 작업 또는 비반응성(비 참조/반응성) 속성을 건너뜁니다.
        
        const { name, doubleCount } = storeToRefs(store)
        
        // increment action은 그냥 추출될 수 있습니다.
        const { increment } = store
        
        return {
            name,
            doubleCount
            increment,
        }
    },
})

- storeToRefs()를 사용하면된다.