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

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

  1. C#中使用MySqlCommand执行插入语句后获取该数据主键id值的方法

    .net中要连接mysql数据库,需要引用MySql.Data.dll文件,这文件在mysql官网上有下载. 接着通过MySqlCommand执行插入语句后想要获取该数据主键id值的方法如下: lon ...

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

    单独改变坐标的代码如下,可不断左移: procedure TForm1.Button1Click(Sender: TObject); begin SetWindowPos(panel1.Handle, ...

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

    在idea项目中,增肌model后,在项目根目录下增加src目录,右键发现无法增加包(Package). 仔细观察发现,新增加的src目录是棕色,而原先的src目录是浅蓝色的,见下图: 在src右键, ...

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

    如果 使用了  module 和 namespace state 数据:=>   this.$store.state.User.info  (user 是模块名字. info 是 state 里 ...

  5. idea中java项目增加module后,手动增加xml文件,合并到webapp/WEB-INFO或WEB-INFO(包)

    当手工增加一个module,增加配置文件(如:web.xml)需要合并到文件夹里,要不众多文件在一个src文件夹下,太凌乱. 1. 合并到webapp/WEB-INFO下 a. 首先增加webapp目 ...

  6. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

  7. 使用SpringMVC的crud操作时,进行数据修改,但是修改成功后,页面无法显示lastName属性值(被修改的那条记录)

    我这个错误的原因在于,把map的键写错了,它必须和类名第一个字母小写相同 @ModelAttribute public void getEmployee(@RequestParam(value=&qu ...

  8. (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法

    (六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...

  9. 大型Vuex应用程序的目录结构

    译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...

随机推荐

  1. Js 运行机制 (重点!!)

    一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3 ...

  2. There is no Action mapped for namespace / and action name .解答

    做struts2登陆检验的时候遇到了一个问题: 输入http://localhost/login_validation/的目的是想显示 文件夹下的文件列表,无奈,使用struts框架,web.xml设 ...

  3. hdu 3861 The King’s Problem trajan缩点+二分图匹配

    The King’s Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  4. java反编译器

    一时手残,把java工程中的源文件给删了,幸亏还有.class文件,想起java可以反编译,所以试一试. JD-Eclipse 如果是使用Eclipse的话,可以用Eclipse插件JadClipse ...

  5. Visual Studio 2015+InstallShield 2015

    下载Installshield http://learn.flexerasoftware.com/content/IS-EVAL-InstallShield-Limited-Edition-Visua ...

  6. Linux中命令行终端切换工具screen

    screen命令 本文转自:http://man.linuxde.net/screen Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接多个本地或远程的命令 ...

  7. 获取解码字符串指定位置的数值 Decoded String at Index

    2018-10-04 12:53:06 问题描述: 问题求解: 首先本题给出了问题的规模,从Note中我们可以看到解码后的字符串长度甚至可以达到2^63的长度,这个长度已经远远超过整型数的范围,因此如 ...

  8. 在远程连接一个 Wndows 10的情况下,重启远程机器

    如果你从菜单找的话,是找不到这个菜单的!!! 你应该直接按 alt + F4 , 就会出现这个选项了. 参考: https://tommynation.com/shut-windows-10-remo ...

  9. 取代iframe框架

    一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...

  10. 20165327 2017-2018-2 《Java程序设计》第4周学习总结

    20165327 2017-2018-2 <Java程序设计>第4周学习总结 教材内容总结 第五章 继承是一种由已有的类创建新类的机制. class 子类名 extends 父类名{ - ...