19.nuxt.jsで画像一覧アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [新規Nuxt.jsアプリの作成] adash333 | 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333 | ||
---|---|---|---|
行 92: | 行 92: | ||
これで、Nuxt.jsでvuetifyを使用する準備が出来ました。 | これで、Nuxt.jsでvuetifyを使用する準備が出来ました。 | ||
- | + | layouts/default.vueのdarkを消したり、以下のように少し変更します。 | |
- | + | ||
- | ===== CodesandboxのNuxt.jsアプリに@nuxtjs/vuetifyを導入 ===== | + | |
- | Vue.jsでvuetifyを利用するためには、vuetifyをインストールしましたが、Nuxt.jsでvuetifyを利用するためには、@nuxtjs/ | + | |
- | + | ||
- | *画面左側を、下方向へ行きます | + | |
- | {{: | + | |
- | *Add Dependency をクリック | + | |
- | {{: | + | |
- | *nuxtjs/ | + | |
- | {{: | + | |
- | *だいぶ時間がかかります。(ときどき、Bad Gatewayと表示されて、先に進めなくなることもあります。そんなときは、Create Sandboxからやり直したりしますが、どのような条件でBad Gatewayになるのか私にはわかりません。。。) | + | |
- | {{: | + | |
- | *nuxt.config.jsファイルのmodulesに、@nuxtjs/ | + | |
- | (変更前) | + | |
- | {{: | + | |
- | (変更後) | + | |
- | {{: | + | |
- | *layouts/ | + | |
< | < | ||
- | <script src=" | + | <script src=" |
</ | </ | ||
- | (変更前) | + | {{:19.nuxt.jsで画像一覧アプリ: |
- | {{:14.nuxt.jsで画像一覧アプリ: | + | |
- | (変更後) | + | |
- | {{: | + | |
- | 参考:https:// | ||
- | @munieru_jp | ||
- | 2018年12月01日に更新 | ||
- | Nuxt.jsのプロジェクトにVuetify.jsを導入する方法 | ||
- | ===== pages/ | ||
- | |||
- | layouts/ | ||
- | |||
- | pages/ | ||
- | (変更後) | ||
- | {{: | ||
- | |||
- | layouts/ | ||
- | (変更後) | ||
- | {{: | ||
===== 犬種リストをDog APIで取得する ===== | ===== 犬種リストをDog APIで取得する ===== | ||
行 143: | 行 107: | ||
==== Dog API用のクラスを作成 ==== | ==== Dog API用のクラスを作成 ==== | ||
- | *apiフォルダを作成 | + | api ディレクトリを新規作成してDog API用のクラスを作成します。 |
- | {{: | + | |
- | *api/ | + | api/ |
- | {{:14.nuxt.jsで画像一覧アプリ:pasted: | + | < |
- | | + | import axios from ' |
- | {{:14.nuxt.jsで画像一覧アプリ: | + | |
+ | class DogApi | ||
+ | constructor() | ||
+ | this.apiBase = 'https://dog.ceo/ | ||
+ | | ||
+ | |||
+ | | ||
+ | return axios.get(`${this.apiBase}/breeds/list/all`) | ||
+ | | ||
+ | return json.data.message; | ||
+ | }) | ||
+ | .catch(e => ({ error: e })); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | const dogApi = new DogApi(); | ||
+ | |||
+ | export default dogApi; | ||
+ | </ | ||
+ | {{:19.nuxt.jsで画像一覧アプリ: | ||
==== 犬種リストを保存するストアを作成 ==== | ==== 犬種リストを保存するストアを作成 ==== | ||
- | *store/ フォルダ内にindex.js | + | Vuexを利用します。 |
- | {{: | + | |
- | *ページ側で | + | store/ |
- | {{:14.nuxt.jsで画像一覧アプリ: | + | < |
+ | import Vuex from ' | ||
+ | |||
+ | const appStore = () => { | ||
+ | return new Vuex.Store({ | ||
+ | state: { | ||
+ | breed_list: {}, | ||
+ | }, | ||
+ | mutations: { | ||
+ | breed_list_update(state, | ||
+ | state.breed_list = {...payload} | ||
+ | }, | ||
+ | } | ||
+ | }) | ||
+ | }; | ||
+ | |||
+ | export default appStore; | ||
+ | </ | ||
+ | {{:19.nuxt.jsで画像一覧アプリ: | ||
==== 画面上に犬種リストを表示する ==== | ==== 画面上に犬種リストを表示する ==== | ||
- | 「Vuexの | + | 「Vuexの |
pages/ | pages/ | ||
+ | < | ||
+ | < | ||
+ | import dogApi from ' | ||
+ | |||
+ | export default { | ||
+ | async fetch({store}) { | ||
+ | let json = await dogApi.breeds(); | ||
+ | store.commit(' | ||
+ | }, | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | Chrome拡張の[[https:// | ||
+ | -Chromeで、Ctrl+Shift+Iでコンソール画面を開く | ||
+ | -一番右の Vue をクリック | ||
+ | -右側の方のVuex をクリック(かなり横長にしないと、Vueや、Vuexのボタンは見つけることが困難、、、) | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ==== 画面上に犬種リストを表示する ==== | ||
+ | Vuexの | ||
+ | |||
+ | 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.1549664519.txt.gz · 最終更新: 2019/02/08 by adash333