Nuxt.jsのnuxtServerInitアクションの使い方
Nuxt.jsでVuexを利用しているとき、fetch()によってコンポーネントがロードされるたびにサーバーサイドレンダリングでデータを取得したくない場合があります。
最初の一度だけサーバーサイドでレンダリングしたいときに、Nuxt.jsの特別なアクションであるnuxtServerInitを使います。
Nuxt.jsのnuxtServerInitアクションの使い方を紹介します。
Nuxt.jsのnuxtServerInitアクションの使い方
注意点としては、nuxtServerInitはstore/index.jsのactionsで使用します。
モジュール化している部分で使用してもうまく動作しません。
また、nuxtServerInitアクションはPromiseを返すかasync/awaitを使う必要があります。
actions: {
setPosts(vuexContext, posts) {
vuexContext.commit('setPosts', posts)
}
},元のstore/index.jsのactionsが上のような状態の場合、下のように追加します。
actions: {
nuxtServerInit(vuexContext, context) {
},
setPosts(vuexContext, posts) {
vuexContext.commit("setPosts", posts);
}
},nuxtServerInitの第一引数には、vuexContextをとります。
第二引数には、データ(ペイロード)です。
Promiseである必要があるので、returnでPromiseかasync/awaitを使います。
actions: {
nuxtServerInit(vuexContext, context) {
return new Promise((resolve, reject) => {
setTimeout(() => {
vuexContext.commit("setPosts", [
{
id: "1",
title: "最初の投稿",
previewText: "プレビューのテキスト",
thumbnail:"サムネ"
},
{
id: "2",
title: "二回目の投稿",
previewText: "二回目のプレビューテキスト",
thumbnail:"サムネ"
}
]);
resolve();
}, 1000);
});
},
setPosts(vuexContext, posts) {
vuexContext.commit("setPosts", posts);
}
},