概要 Vue.jsの状態管理のVuexを学んでいきます。 Vue CLIを使い開発していきます。 前提知識 Vue.jsの基礎的な知識 そもそもVuexって？？？ こういったツリー構造があったときにAからBにデータを受け渡すには$emitで親にバケツリレーし、さらにそれをpropsでバケツリレーすることになります。 これは非常に冗長で、かなり管理のしずらいコードになってしまします。 そんな時に使うのがVuexです！ これをvuexを使うとこんな感じになります。 まーつまりAからVuexにデータをわたし、それを直接VuexからBに渡せると言うことです。 概要がわかったのでさっそく実装にうつっていきましょう！！！ 早速やってみる Vue CLIはinstallされている前提で話を進めていきます。 npm install --save vuex まずはvuexをインストールしましょう！！ touch src/store.js src配下にsrtore.jsを作成していきます。 Vuexは基本的にこのstore.jsに設定を書いていきます。 store.jsの名前は任意ですが、基本のお作法はstore.jsでやることが多いみたいです。 store.js import Vue from "vue"; import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state: { //処理 }, }) これがまず基本形になります。 上から説明するとまずVuexをimportして使えるようにします。 Vue.useはVue.jsのライブラリの関数を使用する時に使うもの程度に覚えておきましょう。(自分はそれくらいの理解で使っています) Vuexを使うためには new Vuex.Store を使っていきます。 これにexport defaultを使うことによって外部で使用できるようにします。 store.js import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state: { count: 2 } }) 今回はcountに2を設定していきます。 これを呼び出すためには Home.vue <p>{{$store.state.count}}</p> こんな感じで呼び出すことができます！！！ Vuex.storeは$storeで表すことができあとはstate.countで受け取っているイメージです。 これをどこのファイルでも使用することが可能になります。 では今度はこの数字を変更して表示させてみましょう。 変更するにはcomputedプロパティが使用できそうです。 Home.vue <template> <p>{{doubleCount}}</p> </template> <script> export default { data() { return { title: "welcom to tokyo", subTitle: "sub title" } }, computed: { doubleCount() { return this.$store.state.count * 2 } }, } </script> こんな感じでいけるのではないでしょうか。 しかしこれでは仮に*3, *4が欲しくなった時にひたすらcomputedで追加していく処理が必要になってしまいます。 そんな時に使えるのがgettersです gettersとは gettersを使うことでvuex上で処理をまとめることができます。 store.js import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state: { count: 2 }, getters: { doubleCount: state => state.count * 2, tripleCount: state => state.count * 3 } }) イメージとしてはこんな感じです。 gettersで処理を一つにまとめてあげます。 ちなみに中身はアロー関数を省略記法でかいています doubleCount: (state) => { return state.count * 2 }, 省略しないとこんな感じです。 これをどう受け取るかと言うとvuexのmapGettersを使用していきます Home.vue <script> import {mapGetters} from "vuex" export default { computed: { ...mapGetters(["doubleCount", "tripleCount"]), }, } </script> 何とこれでおっけいです！ どういった状態かと言うと まずimport でvuexからmapGettersをインポートします。 その後mapGettersをcomputedないで配列で受け取ります。 スプレット演算子でcomputedに格納しています。 computedプロパティの中は基本的にオブジェクト出なければいけないので、スプレット演算子を使うことでオブジェクトにmapGettersを取りこんでいます。 ミューテーションを使ってみる！ 現在の状態だとstateの状態が変更されてしまうと全体の値が変更されてしまいとても冗長になっています。 これを解消するためにvuexにはmutationというものが用意されています。 store.js mutations: { 関数名(state, 任意の引数) { } } のような書き方で記述することができます。 今回はincrementというカウントアップしていく関数を定義して行こうと思います。 store.js import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state: { count: 2 }, getters: { doubleCount: state => state.count * 2, tripleCount: state => state.count * 3 }, mutations: { increment(state, number) { state.count += number; } } }) 先ほどの文法通りにmutationsを足していきます。 第一引数にstateをとりStoreのstateにアクセスできます。 あとはstate.countをnumberの引数分カウントアップしていくように関数を定義しています。 ではこれを受け取っていきます。 this.$store.commit("increment", 2) こんな感じで受け取ることができます！ mutationsはcommitで受け取ることができます。 第一引数に関数名を指定し、あとは引数があれば入れていきます。 今回はnumberで指定しているので、2を入れていくと2ずつカウントアップしていくようになります。 ではもう一つdecrementを追加していきます。 store.js import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state: { count: 2 }, getters: { doubleCount: state => state.count * 2, tripleCount: state => state.count * 3 }, mutations: { increment(state, number) { state.count += number; }, decrement(state, number) { state.count -= number; } } }) 複数のmutationsを受け取るにはmapMutationsヘルパーというものがあります。 <script> import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(["increment", "decrement"]) } } </script> こんな感じでmethodsの部分に記述することができます。 引数はtemplateの部分で記述します。 例えばクリックしたと同時に発火する場合は <div @click="increment(2)"></div> こんな感じで引数を取ればおっけいです！ ただしmutationは同期的な処理しか基本的にかけません。 非同期的に処理する場合はactionを使っていきます！ actionとdispatchとは 非同期の処理を書きたい場合はactionsを使用していきます。 store.js actions: { increment(context, number) { context.commit("increment", number); } } こんな感じにmutationsの下に追加していきます。 actionsは関数の第一引数にcontextをとることができます。 これで関数ないで非同期処理が使えるようになります。 これを受け取る場合は this.$store.dispach("increment", 2) こんなかんじでactionsのcontextはdispatchを使用することによって受け取ることができます！！ もうおなじみですがactionsにもmapActionsがあります！ import { mapActions} from 'vuex'; export default { methods: { ...mapActions(["increment", "decrement"]) } } またこんな感じで省略して受け取ることができます。 この際引数はまた みたいな感じで受け取ればおっけいです！！！ お疲れ様でした！！

はじめに この記事はプログラミング初学者による備忘録用の記事であり、また、少しでも他の初学者のお役に立てればと思い書いています。 今回はaxiosの使い方を練習する為に、laravel6、Vue.js2、axiosを使い外部APIランダムで人名を返してくれる無料WebApiであるRANDOM USER GENERATORのデータを取得後、ブラウザに表示してみました。 間違いなどがございましたら、ご指摘のほどよろしくお願い致します。 事前準備 axiosを使い取得したデータをlaravel側で表示する為に、ルーティングを作成後、新規コントローラー内でメソッドを定義、そしてbladeを作成します。 web.php <?php Route::get('axios', 'AxiosController@index'); :解説 axiosで取得したデータを扱う為にルーティングを新規作成します。 AxiosController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class AxiosController extends Controller { public function index() { return view('axios'); } } :解説 今回は取得したデータを表示するだけなので、メソッドではviewの指定のみ記述しています。 axios.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>axiosを学ぶ</title> <link href="{{ mix('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="axios"> <axios></axios> </div> </body> <script src="{{ mix('js/app.js') }}"></script> </html> :解説 本来なら、bladeの<head>などは切り分けてextendsすべきですが今回はまとめて書いています。 axiosを扱う為に、Vue.jsを使用しているのでbladeで <link href="{{ mix('css/app.css') }}" rel="stylesheet">、<script src="{{ mix('js/app.js') }}"></script>と記述しトランスパイル後のapp.jsとapp.cssを読み込ませています。 <div id="axios"> <axios></axios> </div>と記述し、vueコンポーネント(Axios.vue ※後ほど解説)を持ってきています。 axiosをVue.jsで利用する(GETメソッド) 今回は一番シンプルなGETメソッドを使いたいと思います。 GETメソッドは一番シンプルなメソッドでaxiosだけでなく外部から情報を取得する際の基本になるメソッドです。 では、 laravel側の事前準備はできたので、vue、axiosを使いAPIのデータを取得してみたいと思います。 1.resources/js/app.jsでVueコンポーネントをimportする app.js import './bootstrap' import Vue from 'vue' import Axios from './components/Axios' const axios = new Vue({ el:'#axios', components: { Axios, } }) :解説 elオプションを使うことで、bladeの<div id="axios"> </div>の中でVueコンポーネントを扱えるようにしています。 2.webpack.mix.jsでトランスパイルの設定を行う webpack.mix.js mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version();//追記 :解説 .version();を追記することで、トランスパイル時に付与されるIDを扱うようにしています。これで、ブラウザ側に古いjsのキャッシュが残っていてもトランスパイルした最新の情報をブラウザに渡せるようにしています。 少し詳しく解説... サーバー側に新しいJavaScriptを配置したとしても、ブラウザのキャッシュに以前に読み込んだ同じサーバーのJavaScriptがキャッシュとして残っていると、ブラウザはキャッシュにある古い方のJavaScriptの情報を使ってしまいます。 その対策として、LaravelMixでは、JavaScriptのトランスパイル毎に、idを採番するようにします。idは、トランスパイルの都度mix関数により付与されます。 具体的には、webpack.mix.jsでmix関数により付与されたidを、追記したversionメソッドによって、idを採番するようにします。トランスパイルの都度毎回変わるidパラメーターがあることで、ブラウザはこれをキャッシュにある古いJavaScriptとは別のファイルとみなし、キャッシュを使わずにサーバーから新しいJavaScriptを読み込むようになります。 3.Vueコンポーネントの作成 Axios.vue <template> <div class="style1"> <h1>{{ message }}</h1> <p v-if="errored">サーバとの通信でエラーが発生しています</p> <p v-for="user in users">{{ user.name.title }} {{ user.name.last }}</p> <button class="btn-sm shadow-none border border-primary p-2" @click="clickData"> <font size="3">axiosを使いデータを取得</font> </button> </div> </template> <script> export default { data() { return { message: 'Axios', users: [], errored: false }; }, methods: { clickData() { axios.get('https://randomuser.me/api/', { params: { results: '5' } }) .then(response => {this.users = response.data.results}) .catch(error => {console.log(error)this.errored = true}) }, }, } </script> :解説 今回は、template内でボタンを作り、クリックされた時にaxiosを使いデータを取得するメソッドが実行されるようにしてみました。 axiosの基本的な型は、axios.get(‘URL’) GETの場合、オプションをつけることができます。 方法 1.直接URLにつける axios.get('/user?ID=12345'); 2.optionに指定する 今回は、ランダムにユーザー名を取得するAPIを使用している為、結果を表示する数をオプションで設定しています。 axios.get('https://randomuser.me/api/', { params: { // ここにオプションを指定する results: '5' } }); axiosはPromiseとして値が返ってくるので.then.catchで処理できる .then(response => {this.users = response.data.results}) .catch(error => {console.log(error)this.errored = true}) .then axios.getでデータを取得後、.then(response => this.users = response.data.results)を繋げることで、data(){}の中にある値users:[]に取得した情報を格納することができます。今回、users: []といった空の配列を持つ値にデータを渡しています。 重要: this.users = responseのあとに.dataを続けてthis.users = response.dataにするとデータの中身だけを渡すことができます。今回はオプション付きです。 .catch エラーをキャッチする為に、.catch()を記述します。これによりAPIリクエスト中に何かが失敗した場合知ることができます。 axiosで取得したデータを配列に基づいてbladeで表示する Axios.vue <template> <div class="style1"> //略 <p v-for="user in users">{{ user.name.title }} {{ user.name.last }}</p> //略 </div> </template> 配列に基づいて、アイテムのリストを描画するために、v-forを使用しています。 v-forはuser in users の形式で特別な構文を要求し、users はソースデータの配列で、user は配列要素がその上で反復されているエイリアスです。 bladeでいう@foreach($articles as $article)のような役割を持っています。 users自体に配列としてデータが格納されている仕組みは、 data(){}の中にあるusers:[]という空の配列に、axiosで受け取ったjsonデータを.thenを利用して格納している為です(多分) {{ user.name.title }} {{ user.name.last }}の箇所は、APIのサイトでどのようなデータを取得できるか確認してみてください。 4.表示結果 これで意図したようにブラウザ側で取得データを表示させることができました。 buttonを押すと別の名前が表示されます。 おわりに 今回、axiosを理解する為に色々と動かしてみましたが、結果としてlaravelやVue自体の理解も深まったので万々歳です。 参考文献 axios を利用したAPIの使用例 (Vue.js公式) axios GitHub RANDOM USER GENERATOR テンプレート内でのコンポーネント名の形式 (Vue.js公式)