KYO

Nuxt.jsでaxiosとvuexを使ってみる

2018年11月27日 Nuxt.js , , ,

最近Vue.jsが面白くて勉強して、Nuxt.jsも勉強し始めたのでメモします。

 

キーワードを入力するとQiitaから関連する記事を取得してきて表示するというシンプルなサイトを作ってみました。

ただ作るのはあれなんで、厨二病っぽいデザインにしました
これでスタバにいってドヤ顔しましょう

英語はよくわかんないので強そうなワードをグーグル翻訳にぶちこみました。

nuxtでプロジェクトを作ったらどんどんコードを書いていきます。

 

pages/index.vue

layoutはmainを新しく作成してそっちを使います。
コンポーネントはloading.vueを持っていますので早速作っていきます

components/loading.vue

APIを取得するときにほんの少し時間がかかっちゃうんで、ユーザーがあれ?ってことにならないように、ロード画面を表示して、今やってるぜ感を演出します。

 

layouts/main.vue

まぁもともとあったdefault.vueをコピーして使いまわしています。
常にメインエリアとコマンドエリアを表示しておくようなレイアウトになっております

 

components/command_area.vue

 

コマンドエリアは入力欄にテキストを入力できる画面です。

getDataメソッドではストアのgetDataを呼び出します。キーワードを引数として渡しています。
データの保持と取得はstore/items.jsで行います。

 

components/main_area.vue

 

メインエリアは検索結果を表示するエリアです。
検索結果はストアにあるのでストアから検索結果を引っ張ってきています。

 

store/items.js

axiosがデフォルトで使えるのがNuxtの素晴らしいところですね。
getDataでaxiosを使用してAPIを叩いて検索します。

loadingNowを使って検索中かどうかのフラグを用意しておきます。

 

あとは共通で使えるスタイルシートを準備します

assets/css/main.css

 

nuxt.config.js

 

これで完成です。

 

なんかあれば追記します


関連記事

Nuxt.jsをサーバーで動かす時の設定

2018年11月28日

npm run generateでdistフォルダが出来上がるが、それをサーバーに置くとどうなるのか実験しました。 とりあえず何も考えずに超絶シンプルなものを作る $ vue init nuxt-community/starter-template sample $ cd sample $ npm install $ npm run de...