4.1 名前空間付きモジュールの読み込み方法

ここでは、**Vuexのネームスペース付きモジュール（namespaced module）**を、

**Composition API + <script setup lang="ts">**の形で正しく読み込む方法を解説します。

■ まず、ネームスペース付きモジュールとは？

Vuexでは、ストアをモジュール単位に分割し、各モジュールに**独自の名前空間（namespace）**を持たせることができます。

例えば：

// sampleModule.ts
@Module({ namespaced: true, name: 'sampleModule' })
export default class SampleModule extends VuexModule { ... }

これにより、他のモジュールとgetterやactionの名前がかぶらない設計ができるようになります。

■ Composition APIでの基本的な考え方

クラスコンポーネントでは、vuex-classのnamespaceを使っていました。

const SampleModule = namespace('sampleModule');
@SampleModule.State('text') private text!: string;

• sampleModuleの中にある**stateプロパティtext*を、**このクラスのtextプロパティにバインド（接続）**しています。
• @SampleModule.State('text') は デコレーター と呼ばれる記法です。
• privateはクラス内だけで使える修飾子です。
• !:はTypeScriptの非nullアサーションです（「必ず値があるからコンパイルエラーにしないでね」という宣言）

ですが、Composition APIでは、自分でstoreから直接取り出す必要があります！

つまり、

👉 useStore() + 手動でネームスペースアクセス が基本になります。