스토어 정의하기

import { defineStore } from 'pinia'

// `defineStore()`의 반환 값(함수)을 할당할 변수의 이름은 원하는 대로 지정할 수 있지만,
// 스토어 이름을 사용하고 `use`와 `Store`로 묶는 것이 가장 좋습니다.
// 예: `useUserStore`, `useCartStore`, `useProductStore`
// 첫 번째 인자는 앱 전체에서 스토어의 고유 ID입니다.
export const useMainStore = defineStore('main', {
  // 다른 옵션...
})

주석에 다 쓰여있지만, 스토어의 경우 defineStore를 통해 정의하고 첫 번째 인자로는 "고유한 이름" 그리고 두 번째 인자로는 다른 옵션들을 추가할 수 있다.

일반적인 스토어 정의 명명규칙으로는 use를 앞에 사용하고 뒤에 Store를 붙이는 모양이다.

useMainStore 즉, 이 스토어의 고유 이름은 main이므로 첫번째 인자로 main을 넣어준 것이다.

Vue3에서는 Options API 와 Composition API를 골라서 사용할 수 있도록 제공하고 있는데,

Pinia를 Options API처럼 사용하는 방법은 기존의 Vuex와 크게 다를 게 없으므로 이 부분은 본문 하단에 있는 공식 문서를 따로 참고해보도록 하자.

셋업 스토어

Composition API 의 setup과 유사한 방식의 스토어 정의 방법이다.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})