こんにちは!今日はNuxtで用いるVuexの記述方法のうち最もややこしいやつであるモジュールモードの簡潔な書き方について紹介します。

Nuxtではクラシックモードが使えなくなる

v3からなくなるそうです。今のうちにモジュールモードに移行しよう!ややこしいけど…

てなわけで今回は自分の備忘録を兼ねて、state, getters, actons, mutations の4つの記述例を書き連ねます。どうぞーー

記述例

state

export const state = () => ({
  stateOne: 1,
  stateTwo: 2,
  stateThree: 3,
})

getters

export const getters = {
  gettersOne: state => state.stateOne,

  gettersTwo(state) {
    return state.stateTwo
  },

  gettersThree() {
    return 3
  },
}

actions

export const actions = {
  actionsOne: ({ commit }) => commit('mutationsOne', 1),

  actionsTwo({ commit }) {
    commit('mutationsTwo', 2)
  },

  actionsThree({ commit }) {
    commit('mutationsThree')
  },
}

mutations

export const mutations = {
  mutationsOne: (state, n) => {
    state.stateOne = n
  },
  mutationsTwo(state, n) {
    state.stateTwo = n
  },
  mutationsThree(state) {
    state.stateThree = 3
  },
}

おわりに

モジュールモードはわりと書き方に癖ありなので、書く時に間違えやすい所的な記事をそのうち書きますわ:)

【追記】(2019/05/16)続き書きましたー