前回に引き続き、基礎から学ぶ Vue.jsの読書メモをぺたり。

---

Vuex

• データとその状態に関するすべてを一元管理する、状態管理のためのライブラリ
• propsと$emitのバケツリレーを解消するために使う
• すべてのコンポーネントから1つのデータを参照するため整合性が保ちやすい

ストア

• Vuexが状態を管理するために作成するもの
• アプリケーション内に作った仮想のDBのようなイメージ

コンポーネントとVuexのつながり

• 4つのキーワードを一方通行でつなげている

  • Components
  • Actions
  • Mutations
  • State

State

• ストアで管理している状態そのもの
• コンポーネントでいうdata
• Mutations以外の場所から変更できない

getters

• Stateを取得するための算出データ
• コンポーネントでいうcomputedとmethodsの中間のような機能
• gettersを介さずにStateにアクセスすることもできるが、gettersに集約した方が混乱しない
• 引数付きのgettersはキャッシュしないので、キャッシュしたい場合はコンポーネントの算出プロパティに登録してキャッシュすると良い

Mutations

• Stateを変更できる唯一のメソッド
• コンポーネントでいうところのmethods

• 引数は次のものが取れる

  • state: ステート
  • payload: commitからの引数

タイプ

• ミューテーションとアクションのメソッドを「タイプ」と呼ぶこともある

• タイプは直接呼び出さずに、commitやdispatchを使って呼び出す

  • これはイベントハンドラをまねた概念になっており、呼び出すための「タイプ」とその「ハンドラ」という関係になっている

commit

• 登録されているミューテーションを呼び出すインスタンスメソッド
• コンポーネントでいう$emit
• 引数が複数ある場合は、オブジェクトで1つのpayloadにすると扱いやすい

Actions

• 非同期処理を含めることができるメソッド
• データの加工や非同期処理を行い、その結果をMutationにcommitする
• バリデーションなどState変更以外のことはActionsで済ませる
• エラーハンドリングもActionsで済ませる

dispatch

• 登録されているアクションを呼び出すインスタンスメソッド
• 別のアクション内からも使用できる
• 返り値がPromiseである (そのため非同期処理に向いてる)
• 非同期処理がなければActionsを介さずにcommitすることもできるが、dispatchに集約した方が混乱を防げる

ストアのモジュール分割の方法

• ストアのmodules オプションに登録する

• モジュールへのアクセスは store.state.${モジュール名}

  • e.g. store.state.moduleA
• 同一のタイプ(Mutations / Actions)をcommitした場合はすべてのタイプが実行される

ネームスペース

• 同一タイプでも実行したくない場合は、namespaced: trueオプションを追加すればいい (名前空間を導入できる)

• ネームスペースの場合のcommitは、commit('${ネームスペース}/${タイプ}')にすればいい

  • e.g. commit('moduleA/update')

その他

• importのパス中の「@」は、デフォルトで登録されている「src」ディレクトリのエイリアス