vuex-study.md

Vuex学習

Vuexとは何か

1. state管理パターン+ライブラリのセットで、vueと深く連携する
2. 予測可能な方法でのみstateの変更を行う
3. デバッグのときに、詳細なstateの変更履歴をトレースする

どのようなアドバンテージがあるか？ / どのような効果を狙って導入するか？

1. state バケツリレーを阻止する
2. 状態管理に関する概念を定義・分離し、特定のルールのもとで整理する。 特にこの２点により、コードの品質を保ち整備しやすくすることを目的としてVuexを導入する。

どのような利用法か？ / 注意点があるか？

• ステート シングルトンかつグローバルなストア・オブジェクトにstateを集約する。そのようなブジェクトを単一ステートツリーと呼ぶ。単一ステートツリーはVueコンポーネント ルートインスタンスに直接storeオプションとして渡すことができる。オブジェクトから複数のプロパティを要求する場合には、mapStateヘルパーのようなショートハンドを利用するのが一般的である。Vuexは少なくともデフォルトにおいてでは厳格なシステムではなく、ローカル コンポーネントで何かstateを持つことも許可している。

• ゲッター ストアの状態を計算したいときはストアオブジェクトにgetter methodゲッター メソッドを定義するのが一般的である。それは所望の性質を満たすメソッドをストアオブジェクトに定義しておき、コンポーネントからはその関数を呼び出して使う。ただし、ゲッター メソッドの計算結果はキャッシュされない点に注意する必要がある。また、ゲッター メソッドをまとめてローカルにマッピングするmap gettersヘルパーを利用することもできる。

• ミューテーションとアクションの違い Vuex/Fluxの基本はコンポーネントからstateを切り離し、実際の変更をストアオブジェクトに移管することにある。state変更をストアオブジェクトに頼むことを「ミューテーションをコミットする」という。ミューテーションは同期的な処理である。もし非同期的なstate変更を書きたいなら、そのときVuexはアクションと呼ばれる機構を準備している。アクションはミューテーションをコミットするだけでなく、任意の非同期処理を含むことができる。

• モジュール ストアは往々にして巨大になりすぎるため、ストアオブジェクトを分割して管理することができる。それをモジュールと呼ぶ。モジュールはデフォルトではグローバル ストア オブジェクトの一部であり、この状態を「グローバル名前空間」の元で登録されていると呼ぶ。このとき、複数のモジュールが同じミューテーション/アクションに反応することができる。しかし、状態汚染を避けるために名前空間を分けて整理したいこともある。このようなとき、namespaced:trueオプションが役に立つ。これにより、モジュールを名前空間つきに分離することができ、相互に干渉しない状態を保つことが可能である。

教材

リポジトリ https://github.com/IKKO-Ohta/vuex-study 公式ドキュメント https://vuex.vuejs.org/ja/