【1章】state, getters, mutations, actions の役割とイメージ（詳細版）

🔥 まず最初に「Vuexって何？」の大前提整理

Vue のコンポーネントは本来それぞれ独立している。

だからコンポーネントAでデータ更新しても、コンポーネントBには勝手に伝わらない。

→ そこで 「全部のコンポーネントが同じデータを見られる」 仕組みが必要。

それが Vuex（中央データ管理）。

でも、ただ変数ひとつ置くだけじゃダメ。

勝手に書き換えたら誰が書き換えたかわからないし、いつ変わったか追えない。

→ だから役割を分けて「変え方をルール化」する。

役割	何をする？	どう使う？	非同期できる？
state	データそのもの。今の状態。	`this.$store.state.xxx`	❌ できない
getters	計算して導き出すデータ。stateを加工する。	`this.$store.getters.xxx`	❌ できない
mutations	stateを直接変える唯一の方法。同期処理。	`this.$store.commit('mutation名', payload)`	❌ できない
actions	時間がかかる処理をする。APIや非同期OK。	`this.$store.dispatch('action名', payload)`	✅ できる