vuexについての記事はこちら↓
機能ごとにコードを分割
store.jsは大規模な開発になると肥大化するため、用途ごとにパーツ分けをすると保守運用が効率的になる。
まず、src直下にstoreフォルダを作成し、storeフォルダの直下にmodulesフォルダを作成する。storeフォルダ直下のディレクトリは下記の通り。
modulesの中にあるjsファイルは、用途ごとに分割したもの
store
│ index.js
│
└─modules
count.js
name.js
用途に応じて機能を分割させたファイル（modules）には、それぞれstate,getters,mutations,actionsのオブジェクトを作成し、エクスポートを行う。
const state = {
name: 'Mory',
message:''
};
const getters = {
message:state =>state.message,
name:state => state.name
};
const mutations = {
updateMessage(state,newMessage){
state.message = newMessage
},
updateName(state,newName){
state.name = newName
}
};
const actions = {
updateMessage({commit},newMessage){
commit('updateMessage',newMessage);
},
updateName({commit},newName){
commit('updateName',newName)
}
};
export default{
state,
getters,
mutations,
actions
}
index.jsに各モジュールファイル（name.js等）のインポートを記載する。
import Vue from 'vue';
import Vuex from 'vuex';
import count from "./modules/count";
import name from "./modules/name";
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
count,
name
}
});
上記では、モジュールごとに分けたが、gettersごとmutationsごとactionsごとに分ける事も可能。
その場合、storeフォルダ直下にgetters,mutations,actionsファイルを作成する。
store
│ actions.js
│ getters.js
│ mutations.js
│ index.js
└─modules
gettersの部分はgetters.jsにmutationsの部分はmutations.jsにコピペする。
mutations.jsの例はこちら
export default{
updateName(state,newName){
state.name = newName
},
increment(state, number) {
state.count += number;
},
decrement(state, number) {
state.count -= number;
}
};
それぞれのgetters,mutations,actionsのjsファイルをindex.jsでインポートする。
import Vue from 'vue';
import Vuex from 'vuex';
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: 'Mory',
message: '',
count: 0,
},
getters,
mutations,
actions,
});
モジュール間で同じ
万が一、別のモジュールの中に同じ状態・名前のgettersがあったとしても競合を回避するために、名前空間を利用する。
名前空間を使うには、各モジュールに
namespaced: true
を付与する。
これを付与することで、変数名の頭にモジュール名が付きハイフンで区切られる。
gettersにcounterという変数があるとすると変数名はcount/counterという名前になる。
export default {
namespaced: true,
state,
getters,
mutations,
actions
};
コンポーネントで上記関数を利用したい時は、namespacedで変数名が変わっているので、このように呼び出しを行う。
mapGettersで呼び出しを行っている場合↓
...mapGetters("count",["counter", "doubleCounter"])
// 第一引数にモジュール名を入れる。
mapGettersを使用しない場合↓
computed:{
counter(){
return this.$store.getters["count/counter"];
}
}
