스토어 조합과 스토어 간 접근

저장소에서 다른 저장소 사용하기

동작 내부에서 저장소 호출하기

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

설정 저장소 구문

import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  return { count }
})

ref로 상태 만들기

export const useUserStore = defineStore('user', () => {
  const name = ref('Coddy')
  const profile = reactive({ age: 30 })
  return { name, profile }
})

computed로 접근자 만들기

export const useCounterStore = defineStore('counter', () => {
  const count = ref(2)
  const doubled = computed(() => count.value * 2)
  return { count, doubled }
})

함수로 동작 만들기

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})

ref와 computed 반환하기

export const useStore = defineStore('s', () => {
  const visible = ref(0)
  const secret = ref('hidden') // not returned -> private
  return { visible }
})

설정 저장소에서 저장소 간 사용하기

export const useCartStore = defineStore('cart', () => {
  const auth = useAuthStore()
  const canCheckout = computed(() => auth.isLoggedIn)
  return { canCheckout }
})

순환 종속성 피하기

// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
  doWork() {
    const other = useOtherStore() // resolved at call time
  }
}

지연 호출이 유용한 이유

옵션 저장소와 설정 저장소

빠른 확인

복습