Vuex~Vue.jsとNuxt.jsで書き方がちょっと違う！？

はじめに

勉強中の身です、そのため勘違い等あるかもしれません。
Vue.jsでのVuexの書き方？はなんとなくわかっているつもりで
今回簡単なアプリをNuxt.jsで書こうと思いってVuexの書き方でハマったのでメモとして残します。

Vue.jsの場合

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const state = {
  nowNumber: 0,
};

export const mutations = {
  increment(state) {
    state.nowNumber++;
  },
  decrement(state) {
    if (state.nowNumber <= 0) return;
    state.nowNumber--;
  },
  reset(state) {
    state.nowNumber = 0;
  },
};

export const actions = {
  increment({ commit }) {
    console.log('increment');
    commit('increment');
  },
  decrement({ commit }) {
    console.log('decrement');
    commit('decrement');
  },
  reset({ commit }) {
    console.log('reset');
    commit('reset');
  },
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

コード自体は気にせずに
こんな感じですよね

これを分割して書くと

export const state = {
  nowNumber: 0,
};

こんな感じでファイルをわけて

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

でそのファイルをimportしたら同じ用に使える。

Nuxt.jsの場合

store/index.js

export const state = () => ({
  nowNumber: 0,
});

export const mutations = {
  //省略
};

export const actions = {
  //省略
};

export default ({
  state,
  mutations,
  actions,
});

違いとしてNuxt.jsの場合Vuexが組み込みになっているみたいなので
importの必要がないのとstateが関数になる
問題はここからで、これを分割する場合、上のVue.jsの時と同じ書き方をするとできない。。。
ちゃんと動くようにするには

actions.js

import getters from './getters'

export default {
  postMessage({ commit }, message) {
    const postData = {
      id: getters.fetchId(),
      memo: message,
      date: getters.fetchDate(),
    }
    commit('messageBox', postData)
  },
}

getters.js

export default {
 fetchId() {
    const id = //省略
    return id
  },

  fetchDate() {
    const d = new Date()
    const date = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
    return date
  },
}

export defaultなんですね中身の書き方は同じ感じ
actionsでgetters使いたいとかの場合importする必要があるっぽい
後はこれをindex.jsでimport

store/index.js

import getters from './getters'
import actions from './actions'
export const state = () => ({
  messages: [],
  sample: 'test',
})

export const mutations = {
  messageBox(state, messageData) {
    state.messages.push(messageData)
  },
}

export default {
  state,
  mutations,
  actions,
  getters,
}

これで無事使えるようになった！