Vue【vuex模块化开发】

页面结构

模块A

const moduleA = {
    state: {
        name: '疾风剑豪',
        sex: '男'
    },
    getters: {
        // 模块内的getter方法的默认参数state是模块内的state数据
        // 第二个参数getters是getters中方法的集合
        // 模块内的getter方法可以接收一个rootState作为第三个参数他是所有模块state数据的结合
        changeRoleName(state, getters, rootState) {
            // console.log(rootState)
            return '孙悟空'
        },
        changeSex(state) {
            // return 
        }
    },
    mutations: {
        // 模块内的mutation方法的默认参数state是模块内的state数据
        // 第二个参数是方法调用时传递过来的参数
        saveSex(state, newVal) {
            // state.sex =
            // console.log(newVal)
        }
    },
    actions: {
        getDetail({commit, dispatch, getters, rootGetters, rootState, state}) {
            // commit是提交mutation方法的方法
            // dispatch是使用actions方法的方法
            // state是本模块的state数据
            // 以上这三个参数都是操作本模块数据和方法的方法
            // getters 所有模块的getters方法的集合
            // rootGetters根模块的getters方法的集合
            // rootState 是所有模块的state数据的集合
            // console.log(context)
        }
    }
}
export default moduleA

模块B

const moduleB = {
    state: {
        name: '影流之主'
    },
    getters: {
        changeName() {
            return '张三'
        }
    }
}
export default moduleB