Vuex store リファクタリング

この記事の目的

この記事では、storeを使用した際に肥大化する恐れのあるファイルをどうすれば避けれれるのかをメインに記述していきます。
そもそもVuexとは？ということに関しては前回の記事で書いてますのでそちらを参考に。

https://qiita.com/ron-Qiita/items/27e6271739db95d2223f

ファイルディレクトリー(リファクタリング前)

src --- components
     |
     -- views
     |
     -- *store*
           |
           --- index.js

初期状態では、このようなファイルディレクトリー構造になっていると思います。

ファイルディレクトリー(リファクタリング後)

src --- components
     |
     -- views
     |
     -- *store*
           |
           --- modules
           |      |
           |      --- count.js
           |      |
           |      --- message.js
           --- index.js

このように、使用する機能ベースごとにファイルを分割することで、index.jsは完結にすることができ、コードの可読性を向上させることができます。

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/count' //* リファクタリング
import message from './modules/message' //* リファクタリング

Vue.use(Vuex)

export default new Vuex.Store({
  state: {  },
  // * stateの値をメソッドにする
  getters: {  },
  // * stateの値を変更する 同期的処理
  mutations: {  },
  // * 非同期処理
  actions: {  },
  modules: {
    namespaced: true,
    count //count.jsを使用する
    message // message.js を使用する
  }
})

上記のように親であるindex.jsには処理自体は記載せず、importすることを指定することで、
肥大化を防ぐことができます。

それでは実際にmodulesのフォルダーの中身を見ていきます。

store / modules / count.js

// ! カウントアップ
const state = {
	count: 2
}

const getters = {
	doubleCount: state => state.count * 2,
	tripleCount: state => state.count * 3,
}

const mutations = {
	increment(state, number) {
		state.count += number;
	},
	decrement(state, number) {
		state.count -= number;
	},
}

const actions = {
	increment({ commit }, number) {
		commit('increment', number);
	},
	decrement({ commit }, number) {
		commit('decrement', number);
	},
}
export default {
	state,
	getters,
	mutations,
	actions,
}

store / modules / message.js

const state = {
	message: "",
}

const getters = {
	message: state => state.message
}

const mutations = {
	updateMessage(state, newMessage){
		state.message = newMessage;
	}
}

const actions = {
	updateMessage({ commit }, newMessage){
		commit('updateMessage', newMessage)
	}
}

export default {
	state,
	getters,
	mutations,
	actions
}

双方とも簡単な記述になります。初心者ですのでお手柔らかに...笑

まずは、変数として、

state
getters
mutations
actions

四つを宣言し、その中に処理を記述します。
それを

export default {}

で外部でimportできるような環境設定をします。

これで完成です！

こうすれば、modulesフォルダーから処理が紐づくファイルを探すだけで、
どこに書いてあるかわかりますよね！

一箇所に書いてしまうと、コードを書いた人以外が見るととても見にくいものになってしまうので、注意が必要です。