`setup()` 없이 사용하기

Pinia는 컴포지션 API를 사용하지 않아도 사용할 수 있습니다(만약 Vue <2.7을 사용 중이라면, @vue/composition-api 플러그인을 설치해야 합니다). 컴포지션 API를 시도해보고 배우는 것을 권장하지만, 아직 여러분이나 팀에게 적합한 시기가 아닐 수도 있고, 애플리케이션을 마이그레이션하는 중이거나, 그 외의 이유가 있을 수 있습니다. 몇 가지 함수가 있습니다:

mapStores
mapState
mapWritableState
⚠️ mapGetters (마이그레이션 편의를 위한 것으로, 대신 mapState()를 사용하세요)
mapActions

전체 스토어에 접근하기

스토어의 거의 모든 것에 접근해야 한다면, 스토어의 모든 속성을 하나하나 매핑하는 것은 너무 번거로울 수 있습니다... 대신 mapStores()를 사용하여 전체 스토어에 접근할 수 있습니다:

import { mapStores } from 'pinia'

// 다음과 같은 id를 가진 두 개의 스토어가 있다고 가정합니다
const useUserStore = defineStore('user', {
  // ...
})
const useCartStore = defineStore('cart', {
  // ...
})

export default {
  computed: {
    // 배열을 전달하는 것이 아니라, 스토어를 하나씩 나열합니다
    // 각 스토어는 id + 'Store'로 접근할 수 있습니다
    ...mapStores(useCartStore, useUserStore)
  },

  methods: {
    async buyStuff() {
      // 어디서든 사용할 수 있습니다!
      if (this.userStore.isAuthenticated()) {
        await this.cartStore.buy()
        this.$router.push('/purchased')
      }
    },
  },
}

기본적으로 Pinia는 각 스토어의 id에 "Store" 접미사를 추가합니다. 이 동작은 setMapStoreSuffix()를 호출하여 커스터마이즈할 수 있습니다:

import { createPinia, setMapStoreSuffix } from 'pinia'

// 접미사를 완전히 제거: this.user, this.cart
setMapStoreSuffix('')
// this.user_store, this.cart_store (괜찮아요, 판단하지 않아요)
setMapStoreSuffix('_store')
export const pinia = createPinia()

TypeScript

기본적으로 모든 map 헬퍼는 자동완성을 지원하며, 별도의 작업이 필요하지 않습니다. 만약 "Store" 접미사를 변경하기 위해 setMapStoreSuffix()를 호출했다면, TS 파일이나 global.d.ts 파일 어딘가에 해당 값을 추가해야 합니다. 가장 편리한 위치는 setMapStoreSuffix()를 호출하는 곳과 동일한 위치입니다:

import { createPinia, setMapStoreSuffix } from 'pinia'

setMapStoreSuffix('') // 접미사를 완전히 제거
export const pinia = createPinia()

declare module 'pinia' {
  export interface MapStoresCustomization {
    // 위와 동일한 값으로 설정하세요
    suffix: ''
  }
}

WARNING

TypeScript 선언 파일(예: global.d.ts)을 사용하는 경우, 모든 기존 타입을 노출하기 위해 파일 상단에 반드시 import 'pinia'를 추가하세요.

setup() 없이 사용하기 ​

전체 스토어에 접근하기 ​

TypeScript ​

`setup()` 없이 사용하기

전체 스토어에 접근하기

TypeScript