【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法

Vuex 允许我们把 store 分 module(模块)。每一个模块包含各自的状态、mutation、action 和 getter。

那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, 如果想在模块 A 调用 模块 B 的state, actions, mutations, getters, 该肿么办?

假设有这么两个模块:

模块A:

import api from ‘~api‘

const state = {
    vip: {},
}

const actions = {
    async [‘get‘]({commit, state, dispatch}, config = {}) {
        try {
            const { data: { code, data } } = await api.post(‘vip/getVipBaseInfo‘, config)
            if (code === 1001) commit(‘receive‘, data)
        } catch(error) { console.log(error) }
    }
}

const mutations = {
    [‘receive‘](state, data) {
        state.vip = data
    }
}

const getters = {
    [‘get‘](state) {
        return state.vip
    },
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

模块B:

import api from ‘~api‘

const state = {
    shop: {},
}

const actions = {
    async [‘get‘]({commit, state, dispatch}, config = {}) {
        try {
            const { data: { code, data } } = await api.post(‘shop/getShopBaseInfo‘, config)
            if (code === 1001) commit(‘receive‘, data)
        } catch(error) { console.log(error) }
    }
}

const mutations = {
    [‘receive‘](state, data) {
        state.shop = data
    }
}

const getters = {
    [‘get‘](state) {
        return state.shop
    },
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

 假设模块 B 的 actions 里, 需要用模块 A 的 state 该怎么办?

const actions = {
    async [‘shop‘](store, config = {}) {
        const { commit, dispatch, state, rootState } = store
        console.log(rootState) // 打印根 state
        console.log(rootState.vip) // 打印其他模块的 state
        try {
            const { data: { code, data } } = await api.post(‘shop/getShopBaseInfo‘, config)
            if (code === 1001) commit(‘receive‘, data)
        } catch(error) { console.log(error) }
    }
}

我们来看下上面的代码, actions 中的 shop 方法, 有 2 个参数, 第一个是 store, 第二个是 dispatch 调用时传过来的参数
store 这个对象又包含了 4 个键, 其中 commit 是调用 mutations 用的, dispatch 是调用 actions 用的, state 是当前模块的 state, 而 rootState 是根 state,
既然能拿到根 state, 想取其他模块的 state 是不是就很简单了...?

假设模块 B 的 actions 里, 需要调用模块 A 的 actions 该怎么办?

const actions = {
    async [‘shop‘](store, config = {}) {
        const { commit, dispatch, state, rootState } = store
        try {
            const { data: { code, data } } = await api.post(‘shop/getShopBaseInfo‘, config, ‘get‘)
            if (code === 1001) commit(‘receive‘, data) // 调用当前模块的 mutations
            dispatch(‘vip/get‘, {}, {root: true}) // 调用其他模块的 actions
        } catch(error) { console.log(error) }
    }
}

上面的代码中commit(‘vip/receive‘, {}, {root: true})就是在模块 B 调用 模块 A 的 mutations,
有 3 个参数, 第一个参数是其他模块的 mutations 路径, 第二个是传给 mutations 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 mutations 不是当前模块的

假设模块 B 的 actions 里, 需要用模块 A 的 getters 该怎么办?

const actions = {
    async [‘shop‘](store, config = {}) {
        const { commit, dispatch, state, rootState, rootGetters } = store
        console.log(rootGetters[‘vip/get‘]) // 打印其他模块的 getters
        try {
            const { data: { code, data } } = await api.post(‘shop/getShopBaseInfo‘, config)
            if (code === 1001) commit(‘receive‘, data)
        } catch(error) { console.log(error) }
    }
}

我们来看下上面的代码, 相比之前的代码, store 又多了一个键: rootGetters
rootGetters 就是 vuex 中所有的 getters, 你可以用 rootGetters[‘xxxxx‘] 来取其他模块的getters

https://vuex.vuejs.org/zh-cn/modules.html

https://www.cnblogs.com/yeziTesting/p/7182904.html

转自:https://blog.csdn.net/baidu_31333625/article/details/80351638

原文地址:https://www.cnblogs.com/yunspider/p/9291950.html

时间: 2024-11-02 14:53:53

【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法的相关文章

PHP项目做完后想上线怎么办,告诉你免费上线方法!

PHP程序员找工作的底气是什么?是项目! PHP程序员冲击高薪的信心源自哪里?是项目! PHP程序员掌握理解PHP知识的最好工具是什么?还是项目! 但这么多项目做完后如何上线呢? 为什么项目做完后要尽量上线?可以有下面三个方面的原因: 1.熟悉上线的流程. 2.通过上线引起大家重视,产品意识. 3.对大家找工作有帮助的. 那上线流程又是怎样的呢? 1) 申请空间 2) 购买域名(可选) 3) 将数据库转移到服务器 4) 将项目上传到服务器(注意更改数据库配置) 5) 线上浏览测试 项目上线如此重

使用SetWindowPos API函数移动窗口后,还需修改Delphi的属性值,以备下次使用,否则就会出问题(不是API不起作用,而是使用了错误的坐标值)

单独改变坐标的代码如下,可不断左移: procedure TForm1.Button1Click(Sender: TObject); begin SetWindowPos(panel1.Handle, 0, panel1.Left-10, panel1.Top, panel1.Width, panel1.Height, SWP_NOZORDER + SWP_NOACTIVATE); end; 照理每次改变坐标,都会调用SetBounds,都会调用SetWindowPos函数,可是一旦我屏蔽Upd

idea项目增加module后,增加的目录(src)无法增加包(Package)

在idea项目中,增肌model后,在项目根目录下增加src目录,右键发现无法增加包(Package). 仔细观察发现,新增加的src目录是棕色,而原先的src目录是浅蓝色的,见下图: 在src右键,new->菜单发现没有Package菜单,见下图: 最后发现,需要将src目录变为:Sources Root,见下图: 点击菜单后,src则可以添加包(Package).

Vuex 使用了 module 后的访问方法 ..

如果 使用了  module 和 namespace state 数据:=>   this.$store.state.User.info  (user 是模块名字. info 是 state 里面的属性名字) getters 数据: => this.$store.getters['User/getUserInfo']    (user namespace,模块名,  getUserInfo 是 getter 的名字) mutations  =>   this.$store.commit(

Gradle在大型Java项目上的应用

在Java构建工具的世界里,先有了Ant,然后有了Maven.Maven的CoC[1].依赖管理以及项目构建规则重用性等特点,让Maven几乎成为Java构建工具的事实标准.然而,冗余的依赖管理配置.复杂并且难以扩展的构建生命周期,都成为使用Maven的困扰. Gradle作为新的构建工具,获得了2010 Springy大奖,并入围了2011的Jax最佳Java技术发明奖.它是基于Groovy语言的构建工具,既保持了Maven的优点,又通过使用Groovy定义的DSL[2],克服了 Maven中

《国际项目集管理最佳实践与实战应用》大型复杂项目与项目群管理工作坊

<国际项目集管理最佳实践与实战应用>大型复杂项目与项目群管理工作坊 Program Management Training 主办单位:共创国际-项目管理者联盟 2015年4月10.11.12日 北京 & 课程前言 项目集(PROGRAM)定义为“经过协调管理以获取单独管理它们时无法取得收益与控制的一组关联的项目和项目集活动.”从组织战略的角度来看,项目集管理主要是指组织为实现其战略目标或为其客户提供整体解决方案而在组织高层针对战略性资源进行跨界整合的管理活动. 在全球经济一体化的背景下

flask 大型教程项目优化版(1):Hello World

Hello World 作者背景 作者是一个使用多种语言开发复杂程序并且拥有十多年经验的软件工程师.作者第一次学习 Python 是在为一个 C++ 库创建绑定的时候. 除了 Python,作者曾经用 PHP, Ruby, Smalltalk 甚至 C++ 写过 web 应用.在所有这些中,Python/Flask 组合是作者认为最为自由的一种. 应用程序简介 作为本教程的一部分–我要开发的应用程序是一个极具特色的微博服务器,我称之为 microblog . 我会随着应用程序的不断地进展将涉及到

基于ligerUI+jbpm5自定义表单+Node.js的J2ee大型金融项目《财务预算系统》开发全程实录

基于ligerUI+jbpm5自定义表单+Node.js的J2ee大型金融项目<财务预算系统>开发全程实录 对这个课程感兴趣的可以加我雾非雾QQ2748165793, 讲师介绍: 3年对日外包电信行业软件专家,六年项目开发经验,二年高端培训机构教学管理经验,惠普全球研发中心骨干.现任北风金牌合作讲师. 项目经验丰富: 日本电信NTT DATA SYSTEM 日本航空ANA SYSTEM 日本TAHOO BB 在线信息平台 惠普DDC--InternalManagement SYSTEM(内部管

大型验证项目中的数据管理

? Eduardo Lluna拥有巴伦西亚大学的物理学位和巴伦西亚大学理工学院电子工程系的博士学位.他一向对于软件测试,电子测量设备和感测网路方面的研究都很积极.Lluna有20多年的关于交通控制,公众视野,支付,电信系统领域的即时嵌入系统的软件的专业经验.他曾在SICE, Telvent还有 Design of Systems on Silicon (DS2)公司任过职.他是巴伦西亚大学计算机科学部的副教授,且自2011年1月起,就已在ITI公司的软件质量部担任协助不同研发项目的项目经理.更多