Nuxt.jsをVue.jsに解体するTips(Vuex編)

背景

• Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
• APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
• Nuxt.jsは2.9。Vueは2.6.10
• 今回はVuex編です。

まとめ

• nuxt/store/index.jsを解体する場合、namespacedはfalse
• nuxt/store/hoge.jsを解体する場合(index.js以外の場合)、namespacedはtrue

nuxt/store/index.jsを解体する場合

Nuxt.jsの場合

Nuxt.jsでは以下のコードだけで、よしなにやってくれます。

nuxt/store/index.js

export const state = () => ({
~~省略~~
})

export const mutations = {
~~省略~~
}

export const actions = {
~~省略~~
}

export const getters = {
~~省略~~
}

Vue.jsの場合

モジュール単位で分割して作成します。
ディレクトリ構造は下記のイメージです。

resources/js
├── App.vue
├── app.js
└── store
    ├── modules
    │   ├── hoge.js
    │   └── index.js
    └── store.js

resources/js/store/modules/index.jsの作成

resources/js/store/modules/index.js

const state = () => ({
~~省略~~
})

const mutations = {
~~省略~~
}

const actions = {
~~省略~~
}

const getters = {
~~省略~~
}

export default {
  namespaced: false, //nuxt/store/index.jsを解体する場合、namespacedはfalseになります
  state: state(),
  getters: getters,
  actions: actions,
  mutations: mutations
}

resources/js/store/store.jsでVuexの設定をする

resources/js/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import index from '~/store/modules/index'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    index
  }
})

resources/js/app.jsでresources/js/store/store.jsを設定する

resources/js/app.js

import Vue from "vue";
import App from '~/App.vue'
import store from '~/store/store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

nuxt/store/hoge.jsを解体する場合(index.js以外の場合)

nuxt/store/hoge.jsの中身は以下と仮定する

nuxt/store/hoge.js

export const state = () => ({
~~省略~~
})

export const mutations = {
~~省略~~
}

export const actions = {
~~省略~~
}

export const getters = {
~~省略~~
}

Vue.jsの場合のresources/js/store/modules/hoge.jsのコード

resources/js/store/modules/hoge.js

const state = () => ({
~~省略~~
})

const mutations = {
~~省略~~
}

const actions = {
~~省略~~
}

const getters = {
~~省略~~
}

export default {
  namespaced: true, // nuxt/store/hoge.jsを解体する場合(index.js以外の場合)、namespacedはtrueになります
  state: state(),
  getters: getters,
  actions: actions,
  mutations: mutations
}

resources/js/store/store.jsでVuexの設定をする

resources/js/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import index from '~/store/modules/index'
import hoge from '~/store/modules/hoge'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    index,
    hoge
  }
})

resources/js/app.jsでresources/js/store/store.jsを設定する

resources/js/app.js

import Vue from "vue";
import App from '~/App.vue'
import store from '~/store/store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

参考

• Vuex公式ドキュメント

関連リンク

• Nuxt.jsをVue.jsに解体するTips(JavaScriptコンパイル編)
• Nuxt.jsをVue.jsに解体するTips(Layout編)
• Nuxt.jsをVue.jsに解体するTips(Plugin編)