vuex模块化，如何相互调用（mutations，actions，getters）

先写好两个模块

A模块

const ceshi1 = {
    namespaced: true,
    state: {
        title:'我是测试1State数据'
    },
    mutations: {
       
    },
    actions: {}
};

export default ceshi1;

B模块

const ceshi2 = {
    namespaced: true,
    state: {
        title: '我是测试2State数据'
    },
    mutations: {
       
    },
    actions: {
        
    }
};

export default ceshi2;

1.A模块如何使用B模块中的state值
`
模块A

const ceshi1 = {
    namespaced: true,
    state: {
        title:'我是测试1State数据'
    },
    mutations: {
       
    },
    actions: {}
};

export default ceshi1;`

模块B

const ceshi2 = {
    namespaced: true,
    state: {
        title: '我是测试2State数据'
    },
    mutations: {
       
    },
    actions: {
        hanleChange({
            state,
            commit,
            dispatch,
            rootState,
        }){
            
            console.log(rootState.ceshi1.title)

        },
    }
};

export default ceshi2;

打印结果

2.模块A如何调用模块B中的mutations方法

A模块

const ceshi1 = {
    namespaced: true,
    state: {
        title:'我是测试1State数据'
    },
    mutations: {
        aaa(state,{val}){
            console.log('我是测试1模块的aaa函数')
            console.log(val)
        },
    },
    actions: {}
};

export default ceshi1;

B模块

const ceshi2 = {
    namespaced: true,
    state: {
        title: '我是测试2State数据'
    },
    mutations: {
       
    },
    actions: {
        hanleChange({
            state,
            commit,
            dispatch,
            rootState,
        }){
            commit('ceshi1/aaa',{val:'我是val值'},{root:true})
        
        },
    }
};

export default ceshi2;

打印结果

3.模块A如何调用模块B的actions
A模块

const ceshi1 = {
    namespaced: true,
    state: {
        title:'我是测试1State数据'
    },
    mutations: {
        
    },
    actions: {
        aaa({state},{val}){
            console.log('我是测试1模块actions的aaa函数')
            console.log(val)
        },
    }
};

export default ceshi1;

B模块

const ceshi2 = {
    namespaced: true,
    state: {
        title: '我是测试2State数据'
    },
    mutations: {
       
    },
    actions: {
        hanleChange({
            state,
            commit,
            dispatch,
            rootState,
        }){
            dispatch('ceshi1/aaa',{val:'我是val值'},{root:true})
        
        },
    }
};

export default ceshi2;

打印结果

4.模块A如何调用模块B中的
A模块

const ceshi1 = {
    namespaced: true,
    state: {
        title:'我是测试1State数据'
    },
    mutations: {
        
    },
    actions: {
        
    },
    getters: {
        aaa(state){
            return '我是ceshi1模块getters里面的aaa'
        },
    }
};

export default ceshi1;

B模块

const ceshi2 = {
    namespaced: true,
    state: {
        title: '我是测试2State数据'
    },
    mutations: {

    },
    actions: {
        hanleChange({
            state,
            commit,
            dispatch,
            rootState,
            rootGetters
        }) {
            
            console.log(rootGetters['ceshi1/aaa'])
        },
    }
};

export default ceshi2;

打印结果

5总结
一.rootState //可以获取到别的模块中的state
用法: rootState.ceshi1.title
注意:要先结构出来
二.commit //可以获取当面模块的 mutations方法，也可以获取到别的模块的 mutations方法
用法
1.commit（xxx，{}） //获取当前模块的方法,第一个参数为方法名，第二个为 传的值
2.commit（xxx/bbb,{},{root:true}） //获取其它模块的方法,第一个参数为方法名，第二个为传的值，第三个root值为true，这样才能找到该方法
三.dispatch //可以获取当面模块的 actions方法，也可以获取到别的模块的actions方法
用法
1.dispatch（xxx，{}） //获取当前模块的方法,第一个参数为方法名，第二个为 传的值
2.dispatch（xxx/bbb,{},{root:true}） //获取其它模块的方法,第一个参数为方法名，第二个为传的值，第三个root值为true，这样才能找到该方法
四.rootGetters
用法
rootGetters[‘ceshi1/aaa’] //获取别的模块getters方法