this.$store, this.$router, this.$emit の仕組みVue クラスコンポーネントでは
→ this.$store, this.$router, this.$emit もすべて this に集約されている
これらは Vue の「グローバル機能」にあたる（親から渡されるものではない）
Vue の内部で 「自動的に注入（injection）」されて this に乗る
→ Vue インスタンスそのもの (new Vue({ ... })) に設定されたものが this で使えるようになる仕組み
this.$store → Vuex（状態管理）のインスタンスthis.$store.dispatch('increment'); // ← アクションを呼ぶ
this.$store.state.count; // ← 状態を読む
| 何をしている？ | 説明 |
|---|---|
dispatch |
アクションを呼ぶ |
commit |
ミューテーションを呼ぶ |
state |
状態（データ）を読む |
getters |
計算済みの状態を読む |
🟢 「Vue インスタンスに登録した store がここに入る」 → this.$store で使える。
this.$router → vue-router のインスタンス（ルーティング操作）this.$router.push('/profile'); // ← ページ遷移する
this.$router.replace('/login'); // ← 履歴を残さず遷移
| 何をしている？ | 説明 |
|---|---|
push() |
ページを移動 |
replace() |
履歴を書き換えて移動 |
currentRoute |
現在のルート情報を読む |
🚩 ルーターも Vue インスタンスに登録したものが this.$router に入る。
this.$emit → 子から親へイベントを送る（カスタムイベント）this.$emit('submit', this.formData);