vuex的modules简单使用

1.module是干啥的

背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

2.module的结构

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }

使用module和不使用module对比：

//不使用module
export default new Vuex.Store({
   state:{
            params1:'',
            params2:'',
            params3:'',
            params4:'',
            params5:'',
            .....
            //如果项目大会有很多很多个
}
});

//使用module
export default new Vuex.Store({
    modules: {
        moduleA,
        moduleB，
    }
});

//module通过import引入进来
moduleA={
    state:{
             params1:'',
            params2:'',
   }

moduleB={
    state:{
             params3:'',
            params4:'',
   }

}

通过对比就可以发现如果我们不使用module，store里面一旦state值够多，就会是store结构变得很复杂，而使用module可以使store结构简单明了。

3.module具体使用

3.1创建store,把module引入进来，这里以loginModule为例
ps:注意main.js引入store，加入vue根里面

new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App),
}).$mount('#app');

import Vuex from 'vuex';
import LoginModule from './modules/LoginModule'
import Vue from 'vue'
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        LoginModule
    }
});

3.2创建module
在module里面加入了action 和 mutations，store通过dispatch action 来改变state的值

const actions = {
    saveSessionId({commit},payload) {
        commit('saveSessionId',payload)
    }
};

const state = {
    sessionId: ''
};

const mutations = {
    saveSessionId(state, payload) {
        state.sessionId = payload;
    }
};

export default {
    actions,
    state,
    mutations
}

3.3在vue界面调用store修改值

this.$store.dispatch('saveSessionId', '12345678');