4.2 useStoreが使えない場合の対処方法

ここでは、useStoreが存在しない環境（Vue 2.x + Vuex 3系）で、 Composition APIスタイルに合わせたVuexモジュールの読み込み方法を解説します。

■ なぜuseStoreが使えないのか？

• Vue 2.x + Vuex 3.x環境では、

  Composition API用のuseStoreメソッドが公式には提供されていない。

• 本来のuseStoreは、Vue 3.x + Vuex 4.x以降の標準API。

■ では、どうするのか？

👉 自分で、ストアインスタンスを直接importして使えばいい！

つまり、

• this.$storeに頼らず

• store/index.tsをimportして使う

  これがシンプルな解決策です！

■ 具体例①：ストアを直接インポートする

// ファイル名: useSampleModule.ts
import { computed } from 'vue';
import store from '@/store'; // ★ 直接ストアをインポート

export function useSampleModule() {
  // sampleModuleのstate, getterにアクセス
  const text = computed(() => store.state.sampleModule.text);
  const textLength = computed(() => store.getters['sampleModule/textLength']);
  const currentRouteName = computed(() => store.getters['sampleModule/currentRouteName']);

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

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

✅ ここでは、storeを直接使っているのがポイント！

■ 具体例②：コンポーネント側の呼び出し

// ファイル名: ParentComponent.vue
<script setup lang="ts">
import { useSampleModule } from '@/composables/useSampleModule';

const { text, textLength, currentRouteName, updateText } = useSampleModule();
</script>

✅ useSampleModuleを呼び出すだけで、Vuexのstate・getter・actionが使える！