差分

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

--- 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [0.用意するもの（開発環境）] adash333
+++ 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333
@@ 行 10: / 行 10: @@
 {{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-182442.png}}
+なお、今回も、CodeSandbox上で試みましたが、うまくいかなかったため、ローカルパソコン上で開発を行っています。
+===== 初めてのVuex目次 =====
+[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]
+[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]
+[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]
+[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]
+[[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]
+[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]
 ===== 方針をたてる =====
   -サーバーサイドは、https://dog.ceo/dog-api/　を利用します
@@ 行 53: / 行 66: @@
 </code>
-===== Codesandboxで新規Nuxt.jsアプリの作成 =====
+===== 新規Nuxt.jsアプリの作成 =====
+  *VisualStudioCodeのターミナル画面で、以下を入力
+<code>
+yarn create nuxt-app Nuxt-axios-DogPhotos
+</code>
+いろいろ聞かれるので、以下のように設定します。
+  -プロジェクト名は？ => (Enter)
+  -プロジェクトの一言説明は？ => (Enter)
+  -サーバーフレームワークは？ => 使わない
+  -eslintは使う？ => PWA supportとAxiosを入れる（Linterは使わない、PrettierはVisualStudioCodeの拡張プラグインPrettier - Code formatterを用いています）
+  -axiosモジュールは使う？ => 使います！（大事なことなので、、、）
+  -UIフレームワークは？ => vuetify
+  -testフレームワークは？ => 使わない
+  -レンダリングモードは？ => ユニバーサルじゃなくてシングルページアプリケーション
+  -作者名は？ => (Enter)
+  -パッケージマネージャは？ => npmじゃなくてyarn
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-221907.png}}
+<code>
+cd Nuxt-axios-DogPhotos
+yarn run dev
+</code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152758.png}}
+  *アドレスをCtrlを押しながらクリックすると、以下のページが開きます。
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-222142.png}}
-  *[[https://codesandbox.io/|CodeSandbox]]でNuxt.jsアプリを新規作成
+これで、Nuxt.jsでvuetifyを使用する準備が出来ました。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190712.png}}
+layouts/default.vueのdarkを消したり、以下のように少し変更します。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190824.png}}
-  *Nuxt.jsも2クリックで開発環境が整いました。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190920.png}}
-===== CodesandboxのNuxt.jsアプリに@nuxtjs/vuetifyを導入 =====
-Vue.jsでvuetifyを利用するためには、vuetifyをインストールしましたが、Nuxt.jsでvuetifyを利用するためには、@nuxtjs/vuetifyをインストールし、さらに、nuxt.config.jsファイルのmodulesに、@nuxtjs/vuetifyを追加します。
-  *画面左側を、下方向へ行きます
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-191234.png}}
-  *Add Dependency をクリック
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-191307.png}}
-  *nuxtjs/vuetifyと入力して、一覧に表示される@nuxtjs/vuetify(vuetifyではないことに注意)をクリックしてインストール
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-212600.png}}
-  *だいぶ時間がかかります。（ときどき、Bad Gatewayと表示されて、先に進めなくなることもあります。そんなときは、Create Sandboxからやり直したりしますが、どのような条件でBad Gatewayになるのか私にはわかりません。。。）
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-212838.png}}
-  *nuxt.config.jsファイルのmodulesに、@nuxtjs/vuetifyを追加します。
-(変更前)
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-213005.png}}
-(変更後)
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-213135.png}}
-  *layouts/default.vueの変更
 <html>
-<script src="https://gist.github.com/adash333/75f1f7bc2db7ebd51f6effae0daf81ef.js"></script>
+<script src="https://gist.github.com/adash333/bacc2736bdcd5ce8093225234bc50147.js"></script>
 </html>
-(変更前)
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-222728.png}}
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-223723.png}}
-(変更後)
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-224037.png}}
-参考：https://qiita.com/munieru_jp/items/882727bb493c8502aea1
-@munieru_jp
-年12月01日に更新
-Nuxt.jsのプロジェクトにVuetify.jsを導入する方法
-===== pages/index.vueとlayouts/default.vueの編集 =====
-layouts/default.vueの<container></container>の中身を、pages/index.vueへ移動します。
-pages/index.vue
-(変更後)
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230141.png}}
-layouts/default.vue
-(変更後)
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230303.png}}
 ===== 犬種リストをDog APIで取得する =====
@@ 行 110: / 行 107: @@
 ==== Dog API用のクラスを作成 ====
-  *apiフォルダを作成
+api ディレクトリを新規作成してDog API用のクラスを作成します。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230845.png}}
-  *api/dog.js ファイルを作成
+api/dog.js　（新規作成）
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231018.png}}
+<code>
-  *[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のapi/dog.js をコピペする
+import axios from 'axios'
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231555.png}}
+class DogApi {
+  constructor() {
+    this.apiBase = 'https://dog.ceo/api';
+  }
+  breeds() {
+    return axios.get(`${this.apiBase}/breeds/list/all`)
+      .then(json => {
+        return json.data.message;
+      })
+      .catch(e => ({ error: e }));
+  }
+}
+const dogApi = new DogApi();
+export default dogApi;
+</code>
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-223644.png}}
 ==== 犬種リストを保存するストアを作成 ====
-  *store/ フォルダ内にindex.js を作成し、これまた、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のstore/index.js をコピペします
+Vuexを利用します。
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232206.png}}
-  *ページ側で  fetch() メソッドを定義し、ストアにデータコミット...と、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]に記載してあるのですが、個人的にはVuex、まだ全然わかりません。とりあえずpages/index.vueを写経して次に進みます。
+store/index.js　（新規作成）
-{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232759.png}}
+<code>
+import Vuex from 'vuex'
+const appStore = () => {
+    return new Vuex.Store({
+        state: {
+            breed_list: {},
+        },
+        mutations: {
+            breed_list_update(state, payload) {
+                state.breed_list = {...payload}
+            },
+        }
+    })
+};
+export default appStore;
+</code>
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-223808.png}}
 ==== 画面上に犬種リストを表示する ====
-「Vuexの  mapStateヘルパーを使うことで、ストアからデータを取り出す」らしいのですが、これまたさっぱり、、、とりあえず、とにかく、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のpages/index.vueを写経します。
+「Vuexの  mapStateヘルパーを使うことで、ストアからデータを取り出す」らしいのですが、、、とりあえず、とにかく、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のpages/index.vueを写経します。
 pages/index.vue
+<code>
+<script>
+import dogApi from '@/api/dog'
+export default {
+    async fetch({store}) {
+        let json = await dogApi.breeds();
+        store.commit('breed_list_update', json)
+    },
+}
+</script>
+</code>
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-230906.png}}
+Chrome拡張の[[https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related|Vue.js devtools]] をインストールしておき、
+  -Chromeで、Ctrl+Shift+Iでコンソール画面を開く
+  -一番右の Vue をクリック
+  -右側の方のVuex をクリック（かなり横長にしないと、Vueや、Vuexのボタンは見つけることが困難、、、）
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-231527.png}}
+{{:19.nuxt.jsで画像一覧アプリ:pasted:20190208-231652.png}}
+==== 画面上に犬種リストを表示する ====
+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/　を写経していきます。
+特定の犬種をクリックすると、画像が一覧表示されるようにします。