项目规范化之VUEX模块化

最近做了项目，把vuex所有的东西都一股脑地塞进index.js中，很臃肿，所以学习下模块化。

最近刚好在搞动态路由，用到很多vuex的东西下面是整个store文件夹下的文件：

将以前一股脑塞进index.js中的内容分模块各占一个。
此时index.js里的内容如下，将各个模块导入即可，但要注意此时modules.js是用来引入modules文件夹下的各个模块的

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import getters from './getters'
import modules from './modules'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules
})

modules.js文件如下：建立名字加permission这个子空间

import permission from './modules/permission'

export default {
    permission
}

此时permission文件里面的内容如下：namespace一定要开启这样就可以根据模块名找到对应内容。

export default {
    namespaced: true,/**注意这个地方是打开vuex模块的命名空间实行模块化管理*/
    state: {
        permissionList: null /** 所有路由 */,
        sidebarMenu: [] /** 导航菜单 */,
        currentMenu: '' /** 当前active导航菜单 */,
        control_list: [] /** 完整的权限列表 */,
        avatar: ''/** 头像 */,
        account: ''/** 用户角色 */
    }
    }

假设此时我们要访问permissionList这个字段，

//permission是命名空间
this.$store.state.permission.permissionList

最后为了更直观的展示模块化的作用console一下
console.log(store)看看一下此时的store里面的结构
可以看到此时state里面多了一个permission，即我们命名的模块化空间

点开permission：可以看到我们在permission里面定义的state都可以找到。

mutations的用法跟state稍有不同：截一个store图就明白了
下图LOGIN_IN是我在mutations.js中定义的，而permission/**都是我在permission这个模块中定义的。

假设我要用CLEAR_MENU方法：

this.$store.commit(“permission/CLEAR_MENU”)