先写好两个模块

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方法

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐