目次
1.はじめに
2.Vuexの項目
3.Vuexの流れ
4.どういう使い方をするか
1. はじめに
Vuexの必要性を感じたのでノート的にまとめて頭を整理していきます。
Vuexとは
コンポーネント間の共通の処理を記述する場所（現在のイメージ）。
2. Vuexの項目
| 項目 | 役割 |
|---|---|
| state | データを保持する。Vueのdataに該当 |
| getters | 算出プロパティ。Vuex内ののcomputed。 |
| mutations | Vuex内の値であるstateを変更する。原則ここ経由以外でのstateの変更はしてはいけない |
| actions | 非同期処理を行う。action以外の項目は同期処理 |
3. Vuexの流れ
同期処理と非同期処理でこの辺は変わる。
同期処理
① mutationsでstateの値を変更する処理を記述
↓
②stateの値を変更
非同期処理
① actionsで非同期処理の記述とmutationのメソッドを実行
↓
② mutationsでstateの値を変更する処理を記述
↓
③stateの値を変更
流れのまとめ
- 同期処理
mutations→ state
-非同期処理
actions → mutations → state
5. どういう使い方をするか
今回は外部APIを使用するので,
非同期処理の流れになる。
① actionでリクエストを送信
② mutatioinでstateの配列に受け取ったデータを保存
③ データを保存してある配列を他のコンポーネントで呼び出し使用