本文已参与[新人创作礼]活动，一起开启掘金创作之路。

Vuex模块化方法

当项目中功能较多时，可能会产生很多的数据，这时使用Vuex就会出现配置很多不同功能的数据，降低了代码的可读性等。

为了解决这些问题，可以使用Vuex模块化，即不同的store模块管理不同的功能，每个模块都有自己的actions、mutations、state、getters等配置。

store配置文件index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引入持久化存储插件
import persistedstate from 'vuex-persistedstate'

// 使用Vuex
Vue.use(Vuex)

// 学校功能
const schoolOptions = {
    // 开启命名空间
    namespaced:true,
    // 配置
    actions:{
        getSchoolChange(context,value){
            console.log(context,value,'业务逻辑或请求数据')
        }
    },
    mutations:{
        schoolNameCommit(state,value){
            console.log(state,value,'操作state数据')
        },
    },
    state:{
        studentName: ''
    }
}

// 班级功能
const classOptions = {
    // 开启命名空间
    namespaced:true,
    // 配置
    actions:{
        getChange(context,value){
            if(context.state.className !== 'A班级'){
                context.commit('getChangeAfter',value)
            }else{
                alert('当前是A班级，不能修改！')
            }
        },
    },
    mutations:{
        getChangeAfter(state,value){
            state.className = value
        },
        getNameCommit(state,value){
            console.log(state,value)
            state.className = value
        }
    },
    state:{
        className: '',
    },
    getters:{
        allName(state){
            return state.className + '999';
        }
    }
}

// 创建并暴露store
export default new Vuex.Store({
    // 配置模块,这里使用的ES6对象的简写模式。
    modules:{
        schoolOptions,
        classOptions,
    },
    // 使用持久化插件
    plugins:[persistedstate({
        storage: window.sessionStorage,
    })]
})

此时，组件实例化对象里面的store里面的state：

看图可知，state加了一层，所以获取的话需要加上对应的模块：

$store.state.classOptions.className

使用map时，组件区分不同模块：

借助mapState读取：

state获取值，在使用mapState时加上命名空间即可，其余地方不变：

...
<span>这是学校里面班级的信息，这里是{{className || '--'}}班</span>
...
import { mapState } from 'vuex'
...
// mapState函数返回为一个对象，mapState(['计算属性名（state中对象变量名）'])，这里使用命名空间设置对应模块的state。
// 获取班级功能数据
...mapState('classOptions',['className']),
// 获取学校功能数据
...mapState('schoolOptions',['schoolName']),
...

直接读取：

$store.state.classOptions.className

同理：

actions触发方法：

借助mapActions读取：

...
// 获取班级功能数据
...mapActions('classOptions',['getChange']),
// 获取学校功能数据
...mapActions('schoolOptions',['getSchoolChange']),
...

直接触发方法：

changeAfter(){
// 分类功能名/真正actions对象方法名
// 班级功能
this.$store.dispatch('classOptions/getChange',this.classNameInput);
},

changeSchoolAfter(){
// 分类功能名/真正actions对象方法名
// 学校功能
 this.$store.dispatch('schoolOptions/getSchoolChange',this.schoolNameInput);
},

借助mapMutations读取：

mutations触发方法:

...
// 获取班级功能数据
...mapMutations('classOptions',['getNameCommit']),

// 获取学校功能数据
...mapMutations('schoolOptions',['schoolNameCommit'])
...

直接触发方法：

changeName(){
// 分类功能名/真正mutations对象方法名
// 班级功能
this.$store.commit('classOptions/getNameCommit',this.classNameInput);
},

changeSchoolName(){
// 分类功能名/真正mutations对象方法名
// 学校功能
this.$store.commit('schoolOptions/schoolNameCommit',this.schoolNameInput);
},

借助mapGetters读取：

getters获取值:

...
// 获取班级功能数据
...mapGetters('classOptions',['allName'])
...

直接读取：

$store.getters['classOptions/allName']

Vuex模块化文件

当功能较多时，可将不同功能分为多个文件，再在store配置文件中引入这些配置。

文件结构：

classOptions.js

// 班级功能
export default {
    // 开启命名空间
    namespaced:true,
    // 配置
    actions:{
        getChange(context,value){
            if(context.state.className !== 'A班级'){
                context.commit('getChangeAfter',value)
            }else{
                alert('当前是A班级，不能修改！')
            }
        },
    },
    mutations:{
        getChangeAfter(state,value){
            state.className = value
        },
        getNameCommit(state,value){
            console.log(state,value)
            state.className = value
        }
    },
    state:{
        className: '',
    },
    getters:{
        allName(state){
            return state.className + '999';
        }
    }
}

schoolOptions.js

// 学校功能
export default {
    // 开启命名空间
    namespaced:true,
    // 配置
    actions:{
        getSchoolChange(context,value){
            console.log(context,value,'业务逻辑或请求数据')
        }
    },
    mutations:{
        schoolNameCommit(state,value){
            console.log(state,value,'操作state数据')
        },
    },
    state:{
        studentName: ''
    }
}

index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引入持久化存储插件
import persistedstate from 'vuex-persistedstate'
// 引入不同功能文件配置
import classOptions from '@/store/classOptions'
import schoolOptions from '@/store/schoolOptions'

// 使用Vuex
Vue.use(Vuex)

// 创建并暴露store
export default new Vuex.Store({
    // 配置模块,这里使用的ES6对象的简写模式。
    modules:{
        schoolOptions,
        classOptions,
    },
    // 使用持久化插件
    plugins:[persistedstate({
        storage: window.sessionStorage,
    })]
})