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 のファイル由来をはっきりさせるた命名ルールを設けたほうがいい

また、mixin を使用するときも同様にファイル名をプレフィックスにして出自がわかりやすくしたほうが良い。