nuxt generateしたときStoreは初期化される

この記事を書いている時に、ふとgenerateしたときのstoreの状態について疑問に思ったので調べてみました。

気になったこと

それは「nuxt generateした時にstore.stateに値が保持されているのか？」ということです。
Vuexのstoreはストレージというわけではないので、リロード(F5)された時などはstateの値が初期化されることは知っていました。
しかしgenerate中にstateの値がどうなっているかについては調べても関連情報が見つかりませんでした。

実際にやってみる

store/index.jsのactionsにnuxtServerInit関数を定義し、実行時にログを吐くように仕込んでおきます。
これはnuxt generateが「SSRで実行されている」ことを確認するためです。

store/index.js

// 省略

export const actions = {
  nuxtServerInit ({ commit }) {
    console.log('nuxtServerInit is called.')
  }
}

次にmiddlewareにもログを仕込みます。

middleware/getPosts.js

export default async ({ store, payload }) => {
  console.log('middleware is called.')  // 常に出力される
  if (!store.state.posts.length) {
    console.log('store.posts is empty...')  // postsが空のときに出力される
    await store.dispatch('getPosts')  // 記事の情報を取得してstore.postsに保存する処理
  }
}

これでmiddlewareが呼び出された時のstore.postsの状態がわかります。

結果

こうなりました。

$ npm run generate
.
.
.
ℹ Generating pages                                                           
nuxtServerInit is called.                                                   
middleware is called.                                                       
store.posts is empty...                                                     
nuxtServerInit is called.                                                   
middleware is called.                                                       
store.posts is empty...                                                     
nuxtServerInit is called.                                                   
middleware is called.                                                       
store.posts is empty...                                                     
✔ Generated /                                                               
✔ Generated posts/test2                                                     
✔ Generated posts/test                                                       

見事に毎回storeの情報がリセットされています。
そして静的ファイルを生成する時はSSRで行われることもわかりました。（当たり前か）

結論

generateしているときは毎回storeの状態はリセットされている。
middlewareでstoreの状態をチェックして処理を走らせている場合はnuxt generateの処理に影響を与える可能性がある。（特に外部APIと通信している場合などは注意）

では、皆さんも快適なNuxt.jsライフを。