[Pinia] Store

Store 정의

Store는 defineStore()를 사용하여 정의합니다. 그리고 매개변수로 유니크한 이름을 전달해야 합니다.

import { defineStore } from 'pinia'

// useStore는 useUser, useCart와 같을 수 있습니다.
// 첫 번째 인수는 애플리케이션 전체에서 스토어의 고유 ID입니다.
export const useStore = defineStore('main', {
  // 다른 옵션...
})

id라고도 하는 이 이름은 꼭 필요하며 Pinia에서 Store를 devtools에 연결하는 데 사용합니다. 그리고 반환된 함수의 이름은 use...로 지정하는 것은 사용법을 관용적으로 만들기 위한 composable API 전반에 걸친 규칙입니다.

Store 사용하기

setup() 함수 내부에서 useStore()가 호출될 때까지 Store가 생성되지 않기 때문에 Store를 정의하고 있습니다.

<script setup>
  import { useCounterStore } from '@/store/counterStore'
  const counterStore = useCounterStore()
</script>

원하는 만큼 Store를 정의할 수 있으며 pinia를 최대한 활용하려면 각 Store를 다른 파일에 정의해야 합니다.

Store가 인스턴스화되면 store에서 직접 state, getters, actions에 정의된 모든 속성에 액세스할 수 있습니다.

store는 reactive로 래핑된 객체입니다. 그렇기 때문에 .value로 값을 가져오지 않아도 됩니다. 그러나 구조를 분해해서 재할당할 수 없습니다.

<script setup>
  import { useCounterStore } from '@/store/counterStore'
  const counterStore = useCounterStore()
  // ❌ 이것은 반응성을 깨뜨리기 때문에 작동하지 않습니다.
  const { count, doubleCount } = counterStore
  
  console.log(count) // 항상 1입니다. 
  console.log(doubleCount) // 항상 2입니다.
</script>

반응성을 유지하면서 Store에서 속성을 추출하려면 storeToRefs()를 사용해야 합니다. 그러면 모든 반응 속성에 대한 참조를 생성합니다. 이것은 store의 state만 사용하고 actions를 호출하지 않을 때 유용합니다. Store 자체에도 바인딩되므로 store에서 직접 actions를 구조분해 할당할 수 있습니다.

<script setup>
  import { useCounterStore, storeToRefs } from '@/store/counterStore'
  const counterStore = useCounterStore()
  const { count, doubleCount } = storeToRefs(counterStore)
  // actions은 그냥 추출할 수 있습니다.
  const { counter } = counterStore
</script>