もがき系プログラマの日常スマートフォン用の表示で見るもがき系プログラマの日常もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。2018はじめにこんにちは。2018の7日目の記事です。以下の本を読んで勉強できたことを記載していきます。複雑な状態管理このブロックでは、タスク管理のアプリケーションを例にとって、Vuexを使用せず、データフローのことを考えない場合、どのような辛みがあるのかを完結に説明されています。単方向データフロー・双方向データフローについてが説明されています。このあたりの説明は、公式サイトのほうが簡素かつわかりやすく纏まっていたような気がします。https://vuex.vuejs.org/ja/単方向データフローにするメリットとして、本書で紹介されていた以下の文もイメージしやすかったです。データを取得しつつ更新するといったようなことができなくなり、実装やデバッグが単純になる。データを取得、更新するために何をするかの選択肢が絞られて、理解が容易なコードを書きやすい。Vuexによる状態管理vuexを使用するメリットなどが述べられています。実際のインストール方法も乗っています。CLIでVuexをすでにインストール済みでしたので、飛ばします。CLIでインストールしたVuexのファイルの中身は以下です。Vuexのコンセプト表題の通りVuexのコンセプトについて述べられています。以下の一文が気になりました。Vuexはライブラリとしての機能だけではなく、実際のパターンも含めてVuexであるという見方をすべきです。ストアアプリケーションの状態を保持する役割を持っています。ストアの構成要素は以下の4つということです。いう単位で分割して管理することもできるようです。ステート前述したとおり、アプリケーションの状態をオブジェクトで持っています。Vuexにアプリケーションの全ての状態をもつという設計も可能ですが、それはやりすぎです。持たせたほうが、よいです。Vuexに管理させたい場合の判断材料としては、「アプリケーション全体に関わるデータ」はストアに持たせるというのが、推奨されている使い方のようです。formを出すなどの出し分けのフラグゲッターストア版computed(算出プロパティ)という感じのようです。通常の算出プロパティ同様、キャッシュが可能のようです。getters.aaa}ミューテーションステートを更新するために使用されます。ReduxでいうReducerっぽい感じかと思いますが、Reducderと違うのはstoreが編集可能というところでしょうか?Reducerは既存の状態と、今回やりたい変更をマージして、新しい状態を作るという感じなので、読み取り専用だったような気がしてます。いいか悪いかは別として、個人的にはReduxよりわかりやすくはあります。ミューテーションは、直接呼び出すことはできません。いう感じで呼び出します。payloadとして渡すことができます。})そこまで難しい感じではないですね。注意点としては、ミューテーション内で非同期通信処理を含めないほうがよいということです。非同期通信処理を行いたい場合は、次のアクションで行うべきです。アクション非同期処理や外部のAPIとの連携を行い、最終的にステートを更新するためのミューテーションを呼び出すために使用します。アクションもミューテーションと同じく、直接呼び出せません。いう形で呼び出します。actionのメソッドの引数は1つで、コンテキストという引数が渡されてきます。ミューテーションを実行するメソッドこのブロックの最後に、アクションでajaxを使用してデータをとってくるような擬似的コードが記載されています。非同期通信のコールバック時に、引数のコンテキストのcommitを使用して、ミューテーションを実行して、ストアを変更しています。タスク管理アプリケーションの状態管理こちらは例題として、簡単なタスク管理アプリケーションを開発して、Vuexの使用方法を学びます。こちらは写経しました。シンプルな機能だったので、「そうなってしまった」のかもしれませんが、storeに処理を委譲しているようなロジックでした。思ったのは、算出プロパティの追加方でした。なんとなく計算結果を返すというイメージだったのですが、storeの情報を返すようにするという使い方は、コードも読みやすいし、わかりやすかったです。先程から出てきているストアの分割の話です。モジュールという単位で分割できます。VuexストアとVueコンポーネント間の通信コンポーネントからストアへのアクセス方法が記載されています。アクセスすることができます。別の方法として、ヘルパー関数でのアクセスも紹介されています。mapActionsです。具体的な使用例が本書に記載されていました。こちらも写経いたしました。Routerの連携vuex-router-syncでこちらの問題は解決します。syncしたとことでstore.state.route以下にルーティングのデータが入る。console.log(store.state.route)終わりに大型の写経部分があったので、ガッツリコードを書きました。今回は写経が多い章だったので、そのままガッツリコードを乗せるわけにも行かず、書くのに苦労しました。写経できたおかげで基本的な動きはつかめたと思います。写経したコードもとてもわかり易かったので、まだ未読の方はぜひ買ってみてください。nuxtなどと連携した際また違った動きになるのかどうか、そのあたりももう少し勉強しようと思います。