Nuxt.jsのnuxtServerInitアクションの使い方

Vue.js

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);
      }
    },

Vue.js

Posted by devsakaso