[Pinia] State

State

state는 대부분의 경우 Store의 중심 부분입니다. 그리고 개발자들은 대부분 앱을 나타내는 state를 정의하는 것으로 시작합니다. Pinia에서 state는 초기 값을 리턴하는 함수로 정의됩니다. 그리고 이러한 state는 서버, 클라이언트 모두에서 작동할 수 있습니다.

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 전체 타입 추론에 권장되는 화살표 함수
  state: () => {
    return {
	  // 이 모든 속성은 자동으로 유형이 유추됩니다.
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

state 접근하기

기본적으로 store 인스턴스를 통해 state에 접근하여 직접 읽고 쓸 수 있습니다.

const store = useStore()

store.counter++

state 초기화

store에서 $reset() 메서드를 호출하여 상태를 초기 값으로 재설정 할 수 있습니다.

const store = useStore()

store.$reset()

state 변경하기

store.counter++로 store를 직접 변경하는 것 외에도 $patch 메소드를 호출할 수도 있습니다. state 객체의 부분을 매개변수로 전달하여 여러개의 값을 변경할 수 있습니다.

store.$patch({
  counter: store.counter + 1,
  name: 'Abalam',
})

하지만 객체의 일부 변경으로 배열의 변경을 수행(푸시, 제거, 연결)하려면 적용이 힘들거나 비용이 발생할 수 있습니다. 이때 $patch 메서드에 콜백 함수를 전달하여 해결할 수 있습니다.

cartStore.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

여기서 주요 차이점은 $patch()를 사용하면 여러 변경 사항을 devtools의 단일 항목으로 그룹화할 수 있다는 것입니다. state와 $patch()에 대한 직접적인 변경은 devtools에 나타나며 timeline 확인이 가능합니다.(아직 Vue 3에는 없음).

state 교체

$state속성을 새 객체로 설정하여 저장소의 전체 상태를 바꿀 수 있습니다 .

store.$state = { counter: 666, name: 'Paimon' }

pinia 인스턴스의 상태를 변경하여 애플리케이션의 전체 상태를 바꿀 수도 있습니다.

pinia.state.value = {}

state 구독

Vuex의 subscribe 메소드와 유사하게 스토어의 $subscribe() 메소드를 통해 상태와 변경 사항을 볼 수 있습니다. 일반 watch()보다 $subscribe()를 사용하는 이점은 구독이 패치 후에 한 번만 트리거된다는 것입니다.

cartStore.$subscribe((mutation, state) => {
  // 'pinia'에서 { MutationType } 가져오기
  mutation.type // 'direct' | 'patch object' | 'patch function'
  //cartStore.$id와 동일
  mutation.storeId // 'cart'
  // mutation.type === 'patch object'에서만 사용 가능
  mutation.payload // cartStore.$patch()에 전달된 패치 객체

  // 변경될 때마다 전체 상태를 로컬 스토리지에 유지
  localStorage.setItem('cart', JSON.stringify(state))
})

기본적으로 상태구독은 추가된 컴포넌트에 바인딩됩니다. 즉, 컴포넌트가 마운트 해제되면 자동으로 제거됩니다. 컴포넌트가 마운트 해제된 후에도 이를 유지하려면 { detached: true }를 두 번째 인수로 전달하여 현재 컴포넌트에서 상태 구독을 분리합니다.

export default {
  setup() {
    const someStore = useSomeStore()

    // this subscription will be kept after the component is unmounted
    someStore.$subscribe(callback, { detached: true })

    // ...
  },
}

pinia인스턴스 의 전체 상태를 볼 수 있습니다 .

watch(
  pinia.state,
  (state) => {
    // persist the whole state to the local storage whenever it changes
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

참고

• Vuex와 다르게 state를 직접 변경할 수 있다.
• Vuex와 다르게 Mutations에 대한 개념이 없어졌다.
  • 개념이 더 단순해지고 구조가 간결해짐.