なになれスマートフォン用の表示で見るなになれIT系のことを記録していきます。ReduxVue+Vuexを勉強したアウトプットとしてアプリを作りました。HeroesはAngular公式のチュートリアルです。複数画面があって、WebAPIを呼び出すサンプルになっています。Heroesを再実装しました。実際のプログラムはこちらです。github.comAngular、React+Reduxと比較しつつ、Vue+Vuexによる実装内容を説明します。Viewの作成リスト形式でデータを表示するVueではHTMLに対してテンプレート構文を書いて動的にHTMLを生成できるようになっています。v-forというテンプレート構文で繰り返しの記述をサポートしています。コードを見てもらえば分かるようにAngularにかなり似ています。</div></router-link>ちなみにAngularの場合はngForというテンプレート構文になります。</div></a>フォームを作成するv-modelというテンプレート構文で双方向データバインディングが可能です。バインディングするデータの元はVuexで定義したStoreです。}}</script>Angularのチュートリアルでも双方向データバインディングでフィールドの値とフォームの値とを同期しています。Hero;}WebAPI呼び出しVuexのActionでWebAPIを呼び出します。HTTPのリクエストを実行するのにvue-resourceを使いました。vue-resourceは公式で推奨するやり方ではなくなっているようです。},Actionでの非同期処理の結果をMutationで処理します。},ちなみにReduxのコードです。ActionではVuexとは違い、非同期処理によるPromiseオブジェクトをそのまま渡しています。}}ActionからReducerに処理が流れる時に、redux-promiseを使って、PromiseのオブジェクトをJavaScriptのオブジェクトに変換しています。ReducerではPromiseの値であることを意識せずに処理します。}}CSS指定グローバルなCSSやScopedなCSSを記述することが可能です。以下のようにしてコンポーネント内で閉じたCSS指定が可能です。#039be5;}</style>Angularでも同様にコンポーネント内に閉じたCSS指定が可能です。まとめ今回取り組んでみて、Vue+VuexではAngularやReduxの良いところを取り入れている感じがしました。ActionやMutationの部分など、VuexはReduxに比べて作りがシンプルな感じがしました。»プロフィールid:hi1280日々で得たIT技術を記録していきます。Vuex)」を受講した感想Electronでデスクトップを録画するアプリが簡単に作れました注目記事はてなブログをはじめよう!hi1280さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。