Slide 23
Slide 23 text
Composition
API (2)
import { ref, inject, provide, readonly, Ref, InjectionKey } from ‘vue’
const Modal: InjectionKey> = Symbol()
export const useModal = (injectionKey = Modal) => {
const visible = inject(injectionKey, () => {
const visible = ref(false)
provide(injectionKey, visible)
return visible
}, true)
const show = () => visible.value = true
const dismiss = () => visible.value = false
return { visible: readonly(visible), show, dismiss }
}
コンポーネントを跨ぐ状態管理