🔄 4-2. ライフサイクル内での Vuex の扱い方

✅ 要点まとめ

• クラスコンポーネント：mounted() の中で this.$store.dispatch() などを呼ぶ。
• Composition API：onMounted(() => { store.dispatch(...) }) の形で呼び出す。
• useStore() でストアを取得 → ライフサイクルの中で使用。
• watch() と組み合わせるとデータ変化時に Vuex を操作できる。

🟢 変換パターン（具体例）

【クラスコンポーネントでの Vuex 操作】

// ファイル名: Counter.vue (クラス版)
@Component
export default class Counter extends Vue {
  @Action('fetchData') fetchData!: () => void;

  mounted() {
    this.fetchData();
  }
}

【Composition API (<script setup> 版)】

<!-- ファイル名: Counter.vue -->
<template>
  <p>{{ count }}</p>
</template>

<script setup lang="ts">
// 必要な関数とストアをインポート
import { onMounted, computed } from 'vue';
import { useStore } from '../store/useStore';

// ストアを取得
const store = useStore();

// state から count を取得
const count = computed(() => store.state.count);

// ライフサイクルで action を実行
onMounted(() => {
  store.dispatch('fetchData');
});
</script>

🟡 watch を使った応用例（データ変化に応じて Vuex 操作）

<!-- ファイル名: WatchExample.vue -->
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useStore } from '../store/useStore';

const store = useStore();

// 入力フォームの値
const inputValue = ref('');

// 入力が変わるたびに Vuex の mutation を呼ぶ
watch(inputValue, (newVal) => {
  store.commit('setCount', Number(newVal));
});

// 初回マウント時に初期データを取得
onMounted(() => {
  store.dispatch('fetchData');
});
</script>

🟣 ポイントまとめ