差分

このページの2つのバージョン間の差分を表示します。

--- 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [犬種リストをDog APIで取得する] adash333
+++ 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333
@@ 行 134: / 行 134: @@
-===== 犬種リストを保存するストアを作成 =====
+==== 犬種リストを保存するストアを作成 ====
 Vuexを利用します。
@@ 行 158: / 行 158: @@
 {{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-223808.png}}
+==== 画面上に犬種リストを表示する ====
+「Vuexの  mapStateヘルパーを使うことで、ストアからデータを取り出す」らしいのですが、、、とりあえず、とにかく、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のpages/index.vueを写経します。
-===== pages/index.vueとlayouts/default.vueの編集 =====
-layouts/default.vueの<container></container>の中身を、pages/index.vueへ移動します。
 pages/index.vue
-(変更後)
+<code>
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230141.png}}
+<script>
+import dogApi from '@/api/dog'
-layouts/default.vue
+export default {
-(変更後)
+    async fetch({store}) {
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230303.png}}
+        let json = await dogApi.breeds();
+        store.commit('breed_list_update', json)
+    },
+}
+</script>
+</code>
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-230906.png}}
-===== 犬種リストをDog APIで取得する =====
+Chrome拡張の[[https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related|Vue.js devtools]] をインストールしておき、
-以下の3つの流れで実装します。（引用元：https://luftgarden.work/tut-nuxt-dog-part1/）
+  -Chromeで、Ctrl+Shift+Iでコンソール画面を開く
-  -Dog API用のクラスを作成
+  -一番右の Vue をクリック
-  -ページからAPIのエンドポイントを叩く
+  -右側の方のVuex をクリック（かなり横長にしないと、Vueや、Vuexのボタンは見つけることが困難、、、）
-  -取得した犬種リストをストアに保存
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-231527.png}}
-==== Dog API用のクラスを作成 ====
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-231652.png}}
-  *apiフォルダを作成
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230845.png}}
-  *api/dog.js ファイルを作成
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231018.png}}
-  *[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のapi/dog.js をコピペする
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231555.png}}
-==== 犬種リストを保存するストアを作成 ====
-  *store/ フォルダ内にindex.js を作成し、これまた、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のstore/index.js をコピペします
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232206.png}}
-  *ページ側で  fetch() メソッドを定義し、ストアにデータコミット...と、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]に記載してあるのですが、個人的にはVuex、まだ全然わかりません。とりあえずpages/index.vueを写経して次に進みます。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232759.png}}
 ==== 画面上に犬種リストを表示する ====
-「Vuexの  mapStateヘルパーを使うことで、ストアからデータを取り出す」らしいのですが、これまたさっぱり、、、とりあえず、とにかく、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のpages/index.vueを写経します。
+Vuexの  mapStateヘルパーを使うことで、ストアからデータを取り出すことができるらしいです。
 pages/index.vue
+<code>
+<template>
+  <v-layout>
+    <v-card class="mt-4 mb-4 pa-3">
+      <v-layout row wrap>
+        <v-flex xs4 v-for="(item,i) in breed_list" :key="i">
+          <v-card class="grey lighten-3 ma-2">
+            <v-card-text><a class="button">{{ i }}</a></v-card-text>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </v-layout>
+</template>
+<script>
+import dogApi from '@/api/dog'
+import {mapState} from 'vuex';
+export default {
+    async fetch({store}) {
+        let json = await dogApi.breeds();
+        store.commit('breed_list_update', json)
+    },
+    // mapState ヘルパー
+    computed: mapState(['breed_list']),
+}
+</script>
+</code>
+（変更前）
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-232054.png}}
+（変更後）
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-233732.png}}
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190114-000728.png}}
-TypeError
-Cannot read property 'commit' of undefined と出てしまい、先に進めず。。。
-途中
+===== 犬種リストと、それぞれの犬種の画像リストのページの構成について =====
+引き続き、https://luftgarden.work/tut-nuxt-dog-part2/　を写経していきます。
+特定の犬種をクリックすると、画像が一覧表示されるようにします。