第4章：VuexとComposition APIの実践

4.3 コンポーザブル関数（カスタムフック）でstate, getter, mutation, actionを操作する

ここでは、Composition APIの<script setup>形式に合わせて、 Vuexのstate / getter / mutation / actionをまとめて使いやすくするための **コンポーザブル関数（カスタムフック）**を作成する方法を解説します！

■ なぜコンポーザブル関数を作るのか？

• コンポーネントがすっきりする（ロジックの分離）
• 再利用しやすくなる
• 型推論が効きやすくなる（TypeScriptとの相性◎）

つまり

👉 「Vuexのごちゃごちゃを整理して、スマートに書くため」

です！

■ 作成するコンポーザブル関数のイメージ

// ファイル名: useSampleModule.ts

// Vuexのstate, getter, actionをまとめた「操作窓口」！
export function useSampleModule() {
  const text = ...
  const textLength = ...
  const currentRouteName = ...
  const updateText = ...

  return {
    text,
    textLength,
    currentRouteName,
    updateText,
  };
}

これを呼び出すだけで、

コンポーネント内で簡単にVuexを操作できるようになります！

■ 具体例①：useSampleModule.ts

// ファイル名: useSampleModule.ts

//storeから直接データを取得するためにインポート
import { computed } from 'vue';
import store from '@/store'; // Vuexストア直import！

// sampleModule専用のコンポーザブル関数
export function useSampleModule() {
  // sampleModuleのstate
  const text = computed(() => store.state.sampleModule.text);

  // sampleModuleのgetter
  const textLength = computed(() => store.getters['sampleModule/textLength']);
  const currentRouteName = computed(() => store.getters['sampleModule/currentRouteName']);

  // sampleModuleのaction
  const updateText = (newText: string) => {
    store.dispatch('sampleModule/updateText', newText);
  };

  return {
    text,
    textLength,
    currentRouteName,
    updateText,
  };
}