前言

这两天在忙，这篇接着上一篇， 上一篇实践到了子应用的集成，独立运行及应用间路由跳转， 这一篇实践应用间的数据通信问题， 同样分别实践官方actions通信模式，以及状态管理库vuex, redux的通信模式

正文

一丶准备

1.样式处理， 需要引入element-ui/ ant design ， 细节方面就不说了， 下面会有代码， 给三个截图， 示意一下简单的效果， 样式不是重点

二丶官方actions模式通信

1. actions模式通信是比较简单的， 对于项目中数据处理不需要太大，太复杂的通信的话，还是推荐使用action进行简单的数据通信。

2. 以上述图片为例， 基于这种方式的通信， 我们不需要修改太多的东西，上述整个功能上来讲， 只涉及到了一个购物车数组变化的数据。 因为要进行多应用通信， 所以， 我们可以在主应用中的shared文件中添加一个modules文件夹，方便后续有更多模块数据添加进来，modules文件夹里创建购物车数据文件，buy.js, 只需要导出buy数组就行

3. 然后， 我们需要把buy添加到action里面去。 如果之后有更多模块， 使用es6的。。。语法添加进去就行。

4. 到这里， 主应用的通信数据就处理完了， 那么接下来处理子应用的数据， 首先看到商品页有哪些数据功能

5. 综合上面来看， 就是 标记已选，回显数据，按钮文字改变， 这些都是基本的一些功能模块， 回显的话， 使用当前点击的数据的id去buy数组中找相同的，然后弹窗的数据对象赋值成筛选出来的对象就行， 至于改文字，这个非常简单， 就是通过是否被选去做一个状态判断， 添加标记和修改按钮文字，

1. 显示标记， 获取完主应用传递的数组信息之后，去把已选id都筛选出来， 然后渲染列表通过有没有包含id去决定是否显示标记并修改弹窗文字。

2. 打开弹窗回显数据，同理去判断是否包含id，再进行赋值， 然后， 确认修改数量的时候， 也是先判断一下已选数组里有没有， 没有就添加， 有就修改。 对了， 关闭弹窗的时候，清除一下弹窗数据， 回到初始状态。

6. 然后是购物车， 这个很简单， 就是有个删除同步的功能，思路也是找到对应的数组项，然后把它从数组中移除。

7. 这里提个东西， 在react中，给元素添加事件用onclick(on+事件名)， 并且绑定数据用单花括号， 给方法绑定参数， 使用bind或者箭头函数传参， 这些是react的基本用法，就简单的说下，

8. 那么， 子应用处理完成后， 上述父应用就更简单了， 就是显示已选数组长度，

9.那么到这里， 一个简单的actions通信示例就完成了， 选择三个商品， 然后再删除一个看下效果

10. actions, 代码链接

github.com/hejiyun/qia…

三丶 vuex,redux通信模式

用状态管理库的方法， 和上述actions的方法类似， 上述中， 我们使用modules里的数据是将它引入到actions里， 那么在使用vuex的时候， 我们只需要将store引入到actions里就行， 上述中为什么要创建mudules文件夹， 其实是为了和状态管理有一些相似性， 这样理解起来也更方便一些。

从截图也可以看出，其实用起来没什么变化， 只是数据存储的位置变了， 以及之后修改数据调用的方法变了而已， 这里就不细说了，真有需要的， 我再细致的更新一下文章。 vuex， redux如何使用看下方链接

juejin.cn/post/684490…
juejin.cn/post/684490…

结语

没有比人更高的山， 没有比脚更长的路，加油！