最近、ReactやVue、AngularといったVirtualDOMを使ったフレームワークが人気です。そして、元々Webブラウザ上だけで動作していたのが、サーバサイドでも同じ仕組みで使えるようになっています。サーバサイドレンダリングによって、サーバサイド/クライアントサイドの両方で同じように開発できるようになっています。
Vueでサーバサイドレンダリングを使う際に便利なフレームワークがNuxt.jsになります。そしてmBaaSはネットワークを用いた処理になるので非同期処理になるのがデータ表示時のネックになります。そこで今回はNuxt.jsとmBaaSを組み合わせて使う方法について紹介します。
Nuxt.jsのインストール
Node.jsはすでにインストールされていることとします。まず、Vueを簡単に使うためのCLIツールをインストールします。
$ npm install -g vue-cli
そしてNuxt.jsが組み込まれたテンプレートをインストールします。 <project-name>
は皆さんのものに置き換えてください。
$ vue init nuxt-community/starter-template <project-name>
後は必要なライブラリをインストールします。
$ cd <project-name> $ npm i
JavaScript SDKのインストール
次にNCMBのJavaScript SDKをインストールします。
$ npm i ncmb -S
書き方
初期化
今回はシンプルにデータを取る処理を記述します。 pages/index.vue
の <script>
直下でJavaScript SDKを初期化します。 YOUR_APPLICATION_KEY
と YOUR_CLIENT_KEY
はそれぞれ読み替えてください。
const NCMB = require('ncmb'); const application_key = 'YOUR_APPLICATION_KEY'; const client_key = 'YOUR_CLIENT_KEY'; const ncmb = new NCMB(application_key, client_key);
非同期処理のデータ取得
ここからがポイントです。例えばcreatedメソッドなどでデータ取得を記述しても、データの取得が終わる前にレンダリングしてしまいます。そこでNuxt.jsでは asyncData というメソッドを用意しています。ここではasync/await、Promise、コールバックなどを使って非同期データを取得し、画面に反映できます。
例えば以下のようになります。今回はasync/awaitを使っています。
export default { async asyncData ({ params }) { const Hello = ncmb.DataStore('Hello'); const messages = await Hello.fetchAll(); return {messages}; }, data() { return { } }, components: { AppLogo } }
asyncDataで取得したデータは画面に反映されます。
まとめ
データ取得ができれば、追加や更新、削除といった処理もできるでしょう。NCMBをVue/Nuxtと組み合わせる際には、この方法を使ってみてください。