asyncData属性とは？
コンポーネントのロード毎に実行されます。Vuexストアのデータを使わずにデータを取得し、レンダリングの前に、非同期処理を行ってくれます。
標準のVue.jsでは非同期処理用の構文はありませんでしたので、Nuxt.jsでは非同期処理に対応しているということですね。
asyncDataの特徴
asyncData内で取得したデータは、ページコンポーネントのdataとマージすることができます。
asyncDataの実装方法
asyncDataの第一引数
第一引数には、Appや、env等のコンテキストオブジェクトをとります。
コンテキストオブジェクトについては、下記の記事で解説しています。
asyncDataの実装方法としては、下記の3通りがあります。
1.Promiseを返す。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <section> <h1>sample</h1> {{msg}} </section> </template> <script> export default{ asyncData(params){ return new Promise((resolve, reject) => { //非同期処理 resolve(); }).then(() => { return {msg:"test"}; }); }}; </script> |
returnでマージするオブジェクトを返します。
2.async/awaitを利用する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <section> <h1>sample</h1> {{msg}} </section> </template> <script> async function fn(){ return {msg:"test"}; } export default{ async asyncData(params){ const result = await fn(); return result; } }; </ script > |
3.第二引数としてコールバック関数を利用する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <section> <h1>sample</h1> {{msg}} </section> </template> <script> async function fn(){ return {msg:"test"}; } export default{ asyncData({params}, callback){ fn().then( res => {callback(null, {msg: res.msg}); }); }}; </script> |
実行結果
いずれのソースコードも、下記の実行結果になる。
この記事へのコメントはありません。