19.nuxt.jsで画像一覧アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [犬種リストをDog APIで取得する] adash333 | 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333 | ||
---|---|---|---|
行 134: | 行 134: | ||
- | ===== 犬種リストを保存するストアを作成 | + | ==== 犬種リストを保存するストアを作成 ==== |
Vuexを利用します。 | Vuexを利用します。 | ||
行 158: | 行 158: | ||
{{: | {{: | ||
- | + | ==== 画面上に犬種リストを表示する | |
- | + | 「Vuexの | |
- | ===== pages/ | + | |
- | + | ||
- | layouts/default.vueの< | + | |
pages/ | pages/ | ||
- | (変更後) | + | < |
- | {{: | + | < |
+ | import dogApi from ' | ||
- | layouts/default.vue | + | export |
- | (変更後) | + | async fetch({store}) { |
- | {{:14.nuxt.jsで画像一覧アプリ: | + | let json = await dogApi.breeds(); |
+ | | ||
+ | }, | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | {{:19.nuxt.jsで画像一覧アプリ: | ||
- | ===== 犬種リストをDog APIで取得する ===== | + | Chrome拡張の[[https://chrome.google.com/webstore/ |
- | 以下の3つの流れで実装します。(引用元:https://luftgarden.work/tut-nuxt-dog-part1/) | + | -Chromeで、Ctrl+Shift+Iでコンソール画面を開く |
- | -Dog API用のクラスを作成 | + | -一番右の Vue をクリック |
- | -ページからAPIのエンドポイントを叩く | + | -右側の方のVuex |
- | -取得した犬種リストをストアに保存 | + | {{: |
- | ==== Dog API用のクラスを作成 ==== | + | {{:19.nuxt.jsで画像一覧アプリ: |
- | *apiフォルダを作成 | + | |
- | {{:14.nuxt.jsで画像一覧アプリ: | + | |
- | *api/dog.js ファイルを作成 | + | |
- | {{: | + | |
- | *[[https:// | + | |
- | {{: | + | |
- | + | ||
- | ==== 犬種リストを保存するストアを作成 ==== | + | |
- | *store/ フォルダ内にindex.js を作成し、これまた、[[https:// | + | |
- | {{: | + | |
- | + | ||
- | *ページ側で | + | |
- | {{: | + | |
==== 画面上に犬種リストを表示する ==== | ==== 画面上に犬種リストを表示する ==== | ||
- | 「Vuexの | + | Vuexの |
pages/ | pages/ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <v-card class=" | ||
+ | < | ||
+ | <v-flex xs4 v-for=" | ||
+ | <v-card class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import dogApi from ' | ||
+ | import {mapState} from ' | ||
+ | |||
+ | export default { | ||
+ | async fetch({store}) { | ||
+ | let json = await dogApi.breeds(); | ||
+ | store.commit(' | ||
+ | }, | ||
+ | // mapState ヘルパー | ||
+ | computed: mapState([' | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
- | {{: | ||
- | TypeError | ||
- | Cannot read property ' | ||
- | 途中 | ||
+ | ===== 犬種リストと、それぞれの犬種の画像リストのページの構成について ===== | ||
+ | 引き続き、https:// | ||
+ | 特定の犬種をクリックすると、画像が一覧表示されるようにします。 | ||
19.nuxt.jsで画像一覧アプリ/index.html.1549665540.txt.gz · 最終更新: 2019/02/08 by adash333