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>