楽しいだけで十分です

基礎から学ぶ Vue.js CHAPTER8 (Vuex でアプリケーションの状態を管理)

前回に引き続き、基礎から学ぶ 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」ディレクトリのエイリアス
yinm

WRITTEN BY yinm

I'm a software engineer.