monteecristoo’s blog

https://twitter.com/irakaarozo

Vuex の actions の名前の付け方

大規模開発のため vuex の store.js をモジュール化すると各 component から vuex の action をインポートした際、action がどこのモジュールに含まれているかわからなくなってくる。

 

@store.js

import Vue from 'vue';

import Vuex from 'vuex';

 

import activity from './modules/activity.js';
import friends from './modules/friends.js';
import follows from './modules/follows.js';
import profile from './modules/profile.js';
import recommend from './modules/recommend.js';

 

Vue.use(Vuex);

 

export default new Vuex.Store({
modules: {
  activity,
  friends,
  follows,
  profile,
  recommend,
  stream,
  swiper,
  user,
}
});

 

@modules/profile.js

const state = {
loadedUser: "",
loadedUsers: []
};

const getters = {
/* Get current user profile from URL @Profile.vue */
loadedUser(state) {
return (id) => {
return state.loadedUsers.find((loadedUser) => {
return loadedUser.id === id;
});
};
},
};

const actions = {
/* Add user to loadedUsers from profile.vue */
loadUser({ commit }, user) {
commit('LOAD_USER', user);
}
};

const mutations = {
'LOAD_USER' (state, user) {
state.loadedUser = user;
}
};

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

 

@modules/user.js

/* Get and set auth user data */

import {mapGetters} from 'vuex';

const state = {
user: {

},
userDetail: {

}
};

const getters = {
getUser: state => {
return state.user;
},
getUserDetail: state => {
return state.userDetail;
}
}

const actions = {
/* from Sidenavbar.vue and Edit.vue */
user_setUser({ commit }, user) {
commit('SET_USER', user);
},
/* from ProfileDetail.vue */
user_setUserDetail({ commit }, userDetail) {
commit('SET_USER_DETAIL', userDetail);
},

editMode({ commit }) {
commit('EDIT_MODE');
},
};

const mutations = {
'SET_USER' (state, user) {
state.user = user;
},
'SET_USER_DETAIL' (state, userDetail) {
state.userDetail = userDetail;
}
};

export const userMixin = {
data() {
editable: false
},
methods: {
editUser() {
this.editable = true;
}
}
}

export default {
state,
getters,
actions,
mutations,
methods: {
...mapGetters({
user: 'getters'
})
}
};

 

@hogeComponents.vue

import {mapActions} from 'vuex';

methods: {
...mapActions({
  setUser: 'user_setUser', ファイル名_actionName とすればどこのファイルに由来するかわかる
  loadUser: 'loadUser', loadUser がどのファイルに含まれるかわからない
  loadRecommends: 'loadRecommends',
}),
},

 

action のファイル由来をはっきりさせるた命名ルールを設けたほうがいい