10.1 中規模コンポーネントのリファクタリング演習
ここでは、これまで学んできた内容を総動員して、
中規模サイズのクラスコンポーネントを、**Composition API + <script setup lang="ts">**にリファクタリングしていきます。
今回対象とするのは、「親子コンポーネント＋Vuex＋v-model＋watch＋Jestテスト」という複合要素が絡む典型的な業務用画面の想定です。
具体的な演習フローは、以下です。
■ リファクタリング演習の対象コンポーネント概要
🎯 ParentComponent.vue（クラスコンポーネント版）
- 子コンポーネントへv-modelでデータを渡す
- Vuexからstate, getterを参照
- Vuexのactionを叩く
- v-modelの値をwatchする
- 画面に「テキスト長」「ルート名」を表示する
🎯 ChildComponent.vue（クラスコンポーネント版）
- v-modelのvalueをinput要素にバインド
- inputイベントをemitする
🎯 Vuexモジュール（sampleModule）
- text, currentRouteをstate管理
- textLength, currentRouteNameをgetterで提供