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