import { defineStore } from 'pinia'

// main is the name of the store. It is unique across your application
// and will appear in devtools

// main은 스토어의 이름입니다.
// 이 이름은 애플리케이션 전체에서 고유하며 devtools에 표시됩니다.
export const useMainStore = defineStore('main', {
  // 필수: 새로운 상태(state)를 반환하는 함수
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // 선택: getters
  getters: {
    // getter들은 첫 번째 매개변수로 state를 전달 받습니다.
    doubleCounter: (state) => state.counter * 2,
    // 다른 getter에서 getter 사용
    doubleCounterPlusOne(): number {
      return this.doubleCounter + 1
    },
  },
  // 선택: actions
  actions: {
    reset() {
      // `this`는 store 인스턴스를 의미합니다.
      this.counter = 0
    },
  },
})

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const main = useMainStore()

    // 특정 store 속성을 추출합니다.
    const { counter, doubleCounter } = storeToRefs(main)

    return {
      // 템플릿에서 main이라는 store 전체를 이용할 수 있도록 합니다.
      main,
      // 특정 state 또는 getter만 이용할 수 있도록 합니다.
      counter,
      doubleCounter,
    }
  },
})