✅ 5.4 Before / After コード例（useStoreなし）

■ Before（クラスコンポーネント）

// ファイル名: ParentComponent.vue（Before）
<template>
  <div>
    <p>現在のテキスト長: {{ textLength }}</p>
    <p>現在のルート名: {{ currentRouteName }}</p>
    <ChildComponent v-model="childValue" />
    <button @click="changeText">テキスト更新</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import ChildComponent from './ChildComponent.vue';

const SampleModule = namespace('sampleModule');

@Component({
  components: { ChildComponent },
})
export default class ParentComponent extends Vue {
  private childValue: string = '初期値';

  @SampleModule.State('text') private text!: string;
  @SampleModule.Getter('textLength') private textLength!: number;
  @SampleModule.Getter('currentRouteName') private currentRouteName!: string;
  @SampleModule.Action('updateText') private updateText!: (text: string) => Promise<void>;

  @Watch('childValue')
  onChildValueChanged(newVal: string, oldVal: string) {
    console.log('Child value changed:', newVal, oldVal);
  }

  changeText() {
    this.updateText(this.childValue);
  }
}
</script>

■ After（Composition API + <script setup lang="ts">）※useStoreなし

// ファイル名: ParentComponent.vue（After）
<template>
  <div>
    <p>現在のテキスト長: {{ textLength }}</p>
    <p>現在のルート名: {{ currentRouteName }}</p>
    <ChildComponent v-model="childValue" />
    <button @click="changeText">テキスト更新</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import ChildComponent from './ChildComponent.vue';
import store from '@/store';

//双方向バインディングするchildValueを定義
const childValue = ref<string>('初期値');

//getterをcomputedで取得（型アサーションで型を補完）
const textLength = computed(() => store.getters['sampleModule/textLength'] as number);
const currentRouteName = computed(() => store.getters['sampleModule/currentRouteName'] as string);

//changeTextメソッドでstore.dispatchを直接使用（型安全なpayload）
const changeText = () => {
  store.dispatch('sampleModule/updateText', childValue.value);
};

//v-modelの変更を監視するwatch
watch(childValue, (newVal, oldVal) => {
  console.log('Child value changed:', newVal, oldVal);
});
</script>

✅ ポイント解説（After版）

項目 解説
store.getters['sampleModule/xxx'] useStoreを使わないので、ストア直import＋ネームスペース文字列でアクセス
computed() Composition APIではGetterやstateは必ずcomputedでラップ
ref() v-modelで使う変数はrefでリアクティブにする
store.dispatch() Action呼び出しもネームスペース付き文字列で明示
watch() クラスデコレータ@Watchの代替として標準のwatchを使用

🎯 結論（1文で）

useStoreなしでも、storeを直接import＋Composition APIの基本文法（ref, computed, watch）で完全移行が可能！

🎁 例え（t）

クラスコンポーネントは「整理された部屋に専属の執事が全部用意してくれる世界」

Composition APIは「自分で棚を用意して道具を取り出すDIYの世界」

次に進む場合は「5.5へ」と答えてください。