2019-05-20 JavaScript

【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-1.ストア

こんにちは!今日は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)続き書きましたー

PREV
2019-05-19

【JS】JavaScriptで世界で一番クールなFizzBuzzと二番目のFizzBuzz

NEXT
2019-05-22

【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-2.呼び出しと参照