はじめに

Nuxt.jsでVuexを使用する場合、クラシックモードとモジュールモードの2種類の書き方があります。 これまでクラシックモードで使用していましたが、このクラシックモードが次期に廃止されるとのこと。 この機会にモジュールモードに書き換えてみるか〜と思ったので試してみました。

モジュールモードにするには

以下の条件を満たすことでモジュールモードとして動作するようになります。

• store/index.jsがstoreオブジェクトを返さない。
• またはindex.jsが存在しない。

モジュールモードで書いた例

WordPressのWP Rest APIから情報の取得を想定した処理を例にします。 （コードの内容は本記事の趣旨と関係ないので検証していません。コード自体は参考にしないでください汗）

store/wp.js

export const state = () => ({
  page: null,
  meta: {
    description: '',
    name: ''
  },
  wordpressAPI: 'https://glatchdesign.com/wp-json'
})

export const mutations = {
  setPage (state, data) {
    state.page = data
  },
  setMeta (state, data) {
    state.meta = data
  }
}

export const actions = {
  async fetchMeta ({ commit, state }) {
    let meta = await this.$axios.get(state.wordpressAPI)
    commit('setMeta', meta.data)
  }
}

stateとmutationの参照方法

state

ファイル名がそのままnamespaceになるのでstateの参照はthis.$store.state.storeモジュールのファイル名.state名.メソッド名のような形で呼び出すことができます。

this.$store.state.wp.meta.name

mutation

mutationはstoreモジュールのファイル名/mutationの関数名のような形で呼び出すことができます。

export const actions = {
  async nuxtServerInit ({ dispatch }) {
    await dispatch(`wp/fetchMeta`)
  }
}

ハマりどころ

nuxtServerInitはstore/index.jsに

小一時間ハマったのですが、nuxtServerInitを定義している場合、store/index.jsに記述しないと動作しない仕様ですのでご注意ください。 公式ドキュメントにもその旨書かれてますね。公式ドキュメントをちゃんと読めって話です。