Nuxt.js 初期処理を考えてみる

vue-cli の場合は main.js で初期処理を記述するため、ここでアプリケーション全体で１回だけ実行したい処理をはさめる。では、nuxt.jsはどこで処理すべきかを考えてみた。

vue-cliやっていて、nuxt.jsにきた人向けかもしれない。

プラグインを利用する

プラグインはアプリケーション内で利用する共通関数などを登録するイメージがあるが、公式サイトの説明は以下。

Nuxt.js では JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使用する際にとりわけ有用です。
https://ja.nuxtjs.org/guide/plugins#vue-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3

つまり、ここで初期処理を入れてしまうと良い。

nuxt.config.js

// pluginsに処理を挿入する
// 記述した順番で処理されるため、”ここで記述する順番”は重要。

export default {
  plugins: [
    '~/plugins/init.js',  // 1番目に実行される
    '~/plugins/auth.js',  // 2番目に実行される
    '~/plugins/master.js' // 3番目に実行される
  ],
}

plugins/init.js

// storeアクセスできるため、ここでは初期処理をしたいactionをディスパッチする
// この場所でAPI通信等の処理も記述できますが実行結果はstore内に保持しておきたいので
// 個人的には初期処理を行いたいactionをディスパッチが良い。

export default async ({ store }) => {
  const result = await store.dispatch('setup/fetchData')
  if (result) {
    // 成功後の処理
  } else {
    // 失敗後の処理
  }

store/setup.js

// 処理はイメージです。
// actionsで通信処理して結果をコミットして true/false を返す

export const state = () => ({
  data: {}
})

export const mutations = {
  initData(state, result) {
    state.data = result
  }
}

export const actions = {
  // 成功、失敗でtrueまたはfalseを返す
  async fetchData({ commit }) {
    try {
      const result = await fetch('https://xxxxxxxxx')
      commit('initData', result)
      return true
    } catch (e) {
      return false
    }
  }
}

別の方法

検討中...