Providerパターンについて
Providerパターンとは?
provide/inject APIを利用して、「状態やロジック」をコンポーネント間で共有する
components/SimpleStore.ts
import {ref, inject, provide} from 'vue'; const key = Symbol(); const createStore = () => { const count = ref(0); const increment = () => count.value++; return { count, increment, }; }; export const provideStore = () => { provide(key, createStore()); }; export const useStore = (): any => { return inject(key); };
components/CountDisplay.vue
<template lang="pug"> div {{ count }} </template> <script lang="ts"> import {defineComponent} from 'vue'; import {useStore} from '@/components/SimpleStore'; export default defineComponent({ name: 'CountDisplay', setup() { const {count} = useStore(); return { count, }; }, }); </script>
components/CountUp.vue
<template lang="pug"> button(@click="increment") increment </template> <script lang="ts"> import {defineComponent} from 'vue'; import {useStore} from '@/components/SimpleStore'; export default defineComponent({ name: 'CountUp', setup() { const {increment} = useStore(); return { increment, }; }, }); </script>
views/Counter.vue
<template lang="pug"> div CountUp CountDisplay </template> <script lang="ts"> import {defineComponent} from 'vue'; import {provideStore} from '@/components/SimpleStore'; import CountUp from '@/components/CountUp.vue'; import CountDisplay from '@/components/CountDisplay.vue'; export default defineComponent({ name: 'Counter', components: { CountUp, CountDisplay, }, setup() { provideStore(); }, }); </script>