Vue.js/Nuxt.jsでVuexストアを使ってAPIで取得したデータを表示してみる

直接pageにaxios使ってデータを取得したら終わりじゃないの?と思ってたけど、コンポーネント間で共有できるようにVuexストアに保持したほうがいいのね!よくわからないけどw
ということで、ややこしそうだけどなるべくいろんな形に対応できるようにパターン化できたら簡単になるね。

pageでデータ取得してstoreへ

【APIで取得するサンプルデータ】

http://vue.localhost/pref_list.php

※Access-Control-Allow-Originヘッダー
CORS(Cross-Origin Resource Sharing):クロスオリジン(ドメイン)リソース共有。
異なるドメインからのアクセスを許可することね。

【APIからサンプルデータを取得するヤツ】

axios使うよ

※npm v5から「–save」がデフォルトでつくので不要。

【APIアクセス】

※apiディレクトリを作って配置

api/pref.js

【Vuexストア】

store/pref.js

mutationsの関数は第1引数にstate、第2引数に追加の引数(ペイロード)として主にデータを渡す。

※mutationsは状態を変更するもので同期処理のみに使用。
※actionsはミューテーションをコミットするもので非同期処理も可。

【ページ】

pages/list.vue

◆fetch({ context, params })

ページをレンダリングする前にストアのデータを設定するために使用するメソッド。

◆async/awaitについて

asyncは非同期関数を定義するという宣言で内部の関数はawaitをつけることでPromiseを返すらしい。
そうすることによりawaitの関数がresolved(解決)またはrejected(拒否)を返すまでpending(保留)として待つらしい。
jsonが取得できるまでcommitしないってことね!

◆mapStateについて補足

※「$store.state.pref.pref_list」はmapStateヘルパーを使用することで「pref_list」としてバインドできる。

※同じ名前なら配列として渡せるので以下でも可。

※mapStateだけでなく他の算出プロパティも設定するならオブジェクトスプレッド演算子「…」が必要らしい。

ストアでデータ取得する?

上述で『pageでデータを取得⇒ストアにデータを投げる』としたが
データをストアで取得することも考えてみた。

store/pref.js

※mutationsで非同期処理は書けないのでactionsでデータを取得。

pages/list.vue

いろんなやり方できて大混乱ですけど・・・
とりあえずこんな感じでどうでしょう♪

シェアする

  • このエントリーをはてなブックマークに追加

フォローする